feat(system): show where the library lives and offer the move

D129. System > Overview's Library health gains a "Library location" row
(the database path, why it is there, the "Keep it here" choice and any
PROMPT_MANAGER_DATA_DIR problem) with Move library for a node-folder
library and Details otherwise. While a node-folder library is not kept
there, the workspace shows the concept's .notice above every page:
"Keep it here" saves the choice on the server and stops the notice;
"Move library" opens the shared review (From, To, Size, what moves, what
happens to the old files) and starts the exclusive job in Activity. The
notice and the Overview read the location again when the job ends.

The Overview comparison maps the inserted row; a new comparison holds the
notice to the concept's Sources notice (markup, tokens, alignment, both
themes and widths) with a mutation check.
This commit is contained in:
Vito Sansevero
2026-10-24 07:53:18 -07:00
parent edf7811454
commit ea23d5161d
10 changed files with 657 additions and 6 deletions
+3
View File
@@ -18,6 +18,7 @@ import { mountInspect } from './inspect.mjs';
import { mountReview } from './review.mjs';
import { createPromptSender } from './prompt-sender.mjs';
import { mountSystem } from './system.mjs';
import { mountLibraryBanner } from './library-location.mjs';
const { createApiClient, resolveUrl } = window.ApiClient;
@@ -75,6 +76,8 @@ function mountWorkspace() {
const activity = createActivityStore({ api, scope, connect: url => new EventSource(resolveUrl(url)) });
mountActivityTopbar({ store: activity, scope });
activity.load();
// D129: a node-folder library is offered a move (or "Keep it here") above every page.
mountLibraryBanner(document.getElementById('library-banner'), { api, activity, scope });
const sidebar = document.querySelector('aside.sidebar');
// The route key a nav link carries in `data-route`: a saved view's is `saved/<id>`.
const routeKey = route => route.id === 'saved' ? `saved/${route.savedId}` : route.id;
+241
View File
@@ -0,0 +1,241 @@
/**
* Where the library lives (#249 System S6b, D129): the workspace banner, System › Overview's "Library location" row,
* the Move library review and its start.
*
* - The server says where the database is and why (`GET /prompt_manager/system/library` and the Overview's
* `location`): `default` (ComfyUI's user folder), `environment` (PROMPT_MANAGER_DATA_DIR), `config`
* (config.json's database path) or `node_folder`, where an update or reinstall can delete it.
* - D129: while a node-folder library is not kept there, the shell shows the concept's `.notice` (`h2` + `p` +
* `.row-actions`) above every page: "Keep it here" saves the choice on the server (the banner stops; the Overview row
* stays), "Move library" opens the review. The concept has no such notice; its markup and classes are the Sources
* notice's (app.js 680).
* - The review is the shared record-changing review (`openReviewDialog`): From, To, Size, what moves with it and what
* happens to the old files. Move library starts the server's exclusive "Move library" job, tracks it in Activity and
* opens its view; a refusal (another job running, no room, a library already there) says why and nothing starts.
* - When a Move library job ends, the banner and the Overview read the location again.
*/
import { createButton } from '../shared/toolkit/core.js';
import { busyToast } from './activity-scan.mjs';
import { closeWorkspaceDialog, openContentDialog, openReviewDialog } from './workspace-dialogs.mjs';
import { navigateTo } from './state.mjs';
import { showWorkspaceToast } from './toast.mjs';
export const LIBRARY_URL = '/prompt_manager/system/library';
export const MOVE_URL = `${LIBRARY_URL}/move`;
export const KEEP_URL = `${LIBRARY_URL}/keep`;
export const MOVE_KIND = 'library_move';
export const BANNER_TITLE = 'Your library is inside the node folder';
export const BANNER_TEXT = 'Your library is stored inside the node folder, where an update or reinstall can delete it. '
+ 'Move it to ComfyUI\'s user folder: it is copied and verified first, and nothing is deleted.';
export const KEEP_LABEL = 'Keep it here';
export const MOVE_LABEL = 'Move library';
export const ROW_TITLE = 'Library location';
export const START_FAILED = 'Move library could not start. Try again.';
export const KEEP_FAILED = 'Your choice could not be saved. Try again.';
/** Why the library is where it is, by `source`. */
export const SOURCE_TEXT = Object.freeze({
default: 'ComfyUI\'s user folder, which updates and reinstalls of the node leave alone',
environment: 'The folder PROMPT_MANAGER_DATA_DIR names',
config: 'The database path set in config.json',
node_folder: 'The node folder, where an update or reinstall can delete it',
});
/** A `problem` code as a sentence. */
export const PROBLEM_TEXT = Object.freeze({
'data-dir-not-absolute': 'PROMPT_MANAGER_DATA_DIR is not an absolute folder, so it was ignored.',
'data-dir-served': 'PROMPT_MANAGER_DATA_DIR names a folder whose files are served over the web, so it was ignored.',
'data-dir-empty': 'PROMPT_MANAGER_DATA_DIR has no library yet; Move library puts this one there.',
'move-unfinished': 'An earlier move did not finish; this library is still the one in use.',
});
const number = value => Number(value).toLocaleString('en-US');
/** "1.6 GB" or "120.0 MB" or "512 KB". */
export function sizeText(bytes) {
if (!Number.isFinite(bytes) || bytes < 0) return 'Unknown';
if (bytes >= 2 ** 30) return `${(bytes / 2 ** 30).toLocaleString('en-US', { maximumFractionDigits: 1, minimumFractionDigits: 1 })} GB`;
if (bytes >= 2 ** 20) return `${(bytes / 2 ** 20).toLocaleString('en-US', { maximumFractionDigits: 1, minimumFractionDigits: 1 })} MB`;
return `${number(Math.ceil(bytes / 1024))} KB`;
}
/** Whether `location` is a well-formed server answer. */
export function isLocation(location) {
return Boolean(location) && typeof location === 'object' && typeof location.path === 'string'
&& Object.hasOwn(SOURCE_TEXT, location.source) && typeof location.movable === 'boolean';
}
/** The Overview row's description: the path, why it is there, the user's choice and any problem. */
export function locationDescription(location) {
const parts = [`${location.path} · ${SOURCE_TEXT[location.source]}.`];
if (location.movable && location.keep) parts.push('You chose to keep it here.');
const problem = PROBLEM_TEXT[location.problem];
if (problem) parts.push(problem);
return parts.join(' ');
}
/** The review's `[term, value]` rows. */
export function reviewGrid(location) {
return [
['From', location.path],
['To', `${location.target}/prompts.db`],
['Size', sizeText(location.size_bytes)],
['Moves with it', 'config.json and the database backups'],
['Old files', 'Renamed *.moved-to-…, never deleted'],
];
}
export const REVIEW_SENTENCE = 'The copy is verified before Prompt Manager switches to it. No other job can run until it '
+ 'finishes, and closing this page does not stop it.';
function el(tag, text, className) {
const node = document.createElement(tag);
if (text !== undefined) node.textContent = text;
if (className) node.className = className;
return node;
}
/**
* Start the Move library job, follow it in Activity and open its view. A busy server toasts the D57 link to the running
* job; any other refusal says the server's reason. Nothing is said once `scope` ended.
*/
export async function startLibraryMove({ api, activity, scope, notify = showWorkspaceToast, navigate = navigateTo }) {
try {
const { job } = await api.post(MOVE_URL, {}, { signal: scope.signal });
if (scope.signal.aborted) return null;
const tracked = activity.track(job);
navigate(`#/activity/${tracked.id}`);
return tracked;
} catch (error) {
if (scope.signal.aborted) return null;
if (error?.status === 409 && error?.code === 'busy') {
await activity.load();
if (!scope.signal.aborted) notify(busyToast(activity.running()[0] ?? null));
return null;
}
notify(typeof error?.code === 'string' && error.message ? error.message : START_FAILED);
return null;
}
}
/** The Move library review over `location`; Move library starts the job. */
export function openMoveReview({ api, activity, scope, location, trigger = null, notify = showWorkspaceToast,
navigate = navigateTo }) {
return openReviewDialog({ scope, trigger, title: 'Move library', grid: reviewGrid(location), sentence: REVIEW_SENTENCE,
cancelLabel: 'Cancel', primary: { label: MOVE_LABEL },
onStart: () => { startLibraryMove({ api, activity, scope, notify, navigate }); } });
}
/** Save "Keep it here" (`keep` true) or take it back; resolves the new location, or null when it was not saved. */
export async function keepLibrary({ api, scope, keep = true, notify = showWorkspaceToast }) {
try {
const { location } = await api.post(KEEP_URL, { keep }, { signal: scope.signal });
return isLocation(location) ? location : null;
} catch (error) {
if (!scope.signal.aborted) notify(KEEP_FAILED);
return null;
}
}
/** The details of a library that does not move: where it is, why, and what lives beside it. */
export function openLocationDetails({ scope, location, trigger = null }) {
const list = el('dl', undefined, 'meta-grid');
for (const [term, value] of [['Database', location.path], ['Why here', SOURCE_TEXT[location.source]],
['Beside it', 'config.json, the database backups and the logs'], ['Size', sizeText(location.size_bytes)]]) {
const entry = el('div');
entry.append(el('dt', term), el('dd', value));
list.append(entry);
}
const close = createButton('Close');
scope.listen(close, 'click', () => closeWorkspaceDialog());
const actions = el('div', undefined, 'dialog-actions');
actions.append(close);
const nodes = [list];
const problem = PROBLEM_TEXT[location.problem];
if (problem) nodes.push(el('p', problem, 'small'));
nodes.push(actions);
openContentDialog({ scope, title: ROW_TITLE, trigger, nodes });
}
/** D129: the Overview's "Library location" `.operation` row; Move library when it can move, else Details. */
export function locationRow(location, { api, activity, scope, notify = showWorkspaceToast, navigate = navigateTo }) {
const row = el('div', undefined, 'operation');
const text = el('div');
text.append(el('h3', ROW_TITLE), el('p', locationDescription(location)));
const actions = el('div', undefined, 'row-actions');
const action = createButton(location.movable ? MOVE_LABEL : 'Details');
scope.listen(action, 'click', () => {
if (location.movable) openMoveReview({ api, activity, scope, location, trigger: action, notify, navigate });
else openLocationDetails({ scope, location, trigger: action });
});
actions.append(action);
row.append(text, actions);
return row;
}
/** D129: the concept's `.notice` for a node-folder library: Keep it here and Move library. */
export function libraryNotice({ scope, onKeep, onMove }) {
const notice = el('div', undefined, 'notice');
const text = el('div');
text.append(el('h2', BANNER_TITLE), el('p', BANNER_TEXT));
const keep = createButton(KEEP_LABEL);
const move = createButton(MOVE_LABEL, 'ca-primary');
scope.listen(keep, 'click', () => onKeep(keep));
scope.listen(move, 'click', () => onMove(move));
const actions = el('div', undefined, 'row-actions');
actions.append(keep, move);
notice.append(text, actions);
return notice;
}
/** Calls `onEnded()` whenever a Move library job this page sees stops running. Returns the unsubscribe. */
export function onMoveEnded(activity, onEnded) {
const running = new Set();
return activity.subscribe(() => {
let ended = false;
for (const job of activity.jobs()) {
if (job.kind !== MOVE_KIND) continue;
if (job.state === 'running') running.add(job.id);
else if (running.delete(job.id)) ended = true;
}
if (ended) onEnded();
});
}
/**
* Mount the banner in `container` (hidden until the server offers the move). It reads the location once, again when a
* Move library job ends, and hides for good this page once the user keeps the library where it is.
*/
export function mountLibraryBanner(container, { api, activity, scope, notify = showWorkspaceToast, navigate = navigateTo,
latestOnly = window.ApiClient.latestOnly, STALE = window.ApiClient.STALE }) {
const read = latestOnly({ lifetime: scope.signal });
const show = location => {
container.replaceChildren();
container.hidden = !(isLocation(location) && location.offer === true);
if (container.hidden) return;
container.append(libraryNotice({ scope,
onKeep: async button => {
button.setAttribute('aria-disabled', 'true');
const saved = await keepLibrary({ api, scope, notify });
if (scope.signal.aborted) return;
button.removeAttribute('aria-disabled');
if (saved) show(saved);
},
onMove: button => openMoveReview({ api, activity, scope, location, trigger: button, notify, navigate }) }));
};
async function load() {
try {
const answer = await read(signal => api.get(LIBRARY_URL, { signal, cache: 'no-store' }));
if (answer === STALE || scope.signal.aborted) return;
show(answer.location);
} catch {
// The banner is advisory: an unreadable location shows nothing (the Overview row reports it).
if (!scope.signal.aborted) show(null);
}
}
container.hidden = true;
scope.cleanup(onMoveEnded(activity, load));
load();
return { reload: load };
}
+8 -2
View File
@@ -22,6 +22,7 @@ import { showWorkspaceToast } from './toast.mjs';
import { noun } from './plural.mjs';
import { operationRow } from './system-controls.mjs';
import { openThumbnailReview } from './thumbnail-review.mjs';
import { isLocation, locationRow, onMoveEnded } from './library-location.mjs';
export const OVERVIEW_URL = '/prompt_manager/system/overview';
export const STATISTICS_URL = '/prompt_manager/system/statistics';
@@ -319,7 +320,7 @@ function surface(heading, rows) {
}
/** The Overview's nodes, and its thumbnail row (painted by its own read). */
function overviewNodes(overview, { scope, navigate, openStatistics, openThumbnails }) {
function overviewNodes(overview, { api, activity, notify, scope, navigate, openStatistics, openThumbnails }) {
const go = section => () => navigate(`#/system/${section}`);
const review = operationRow({ scope, title: ambiguousTitle(overview.needs_review),
description: Number.isSafeInteger(overview.needs_review?.pending)
@@ -332,6 +333,9 @@ function overviewNodes(overview, { scope, navigate, openStatistics, openThumbnai
review,
operationRow({ scope, title: 'Backup status', description: backupText(overview.backup), label: 'View backups',
onClick: go('backups') }),
// D129: where the library lives and why; Move library when it is in the node folder.
...(isLocation(overview.location)
? [locationRow(overview.location, { api, activity, scope, notify, navigate })] : []),
// D99: Review thumbnails opens the thumbnail dialog (the concept's row starts a sample job directly).
thumbnails,
]);
@@ -394,7 +398,7 @@ export function mountOverview(container, { api, activity, scope, navigate = navi
try {
const overview = await overviewRead(signal => api.get(OVERVIEW_URL, { signal, cache: 'no-store' }));
if (overview === STALE || scope.signal.aborted) return;
const { nodes, thumbnails } = overviewNodes(overview, { scope, navigate, openStatistics,
const { nodes, thumbnails } = overviewNodes(overview, { api, activity, notify, scope, navigate, openStatistics,
openThumbnails: trigger => openThumbnailReview({ api, store: activity, scope, trigger, navigate }) });
thumbnailRow = thumbnails;
sources = overview.sources;
@@ -427,6 +431,8 @@ export function mountOverview(container, { api, activity, scope, navigate = navi
paintThumbnails();
}
const first = swap(loading());
// D129: a finished Move library changes where the library lives.
scope.cleanup(onMoveEnded(activity, load));
load();
loadThumbnails();
return first;
+6
View File
@@ -414,3 +414,9 @@ pre.prompt-text { font: inherit; font-size: 12px; line-height: 1.75; margin-bloc
field) beside their label, as the concept's own radio rows (s1160 `.compare-item label`). */
.field[role="radiogroup"] > label { display: flex; align-items: center; gap: 8px; /* D90 */ }
.field[role="radiogroup"] input[type="radio"] { width: auto; margin: 0; /* D90 */ }
/* D129: the library-location notice sits above every page, in main's own padding and width, so its `.notice` lines
up with the page below; main's top padding then spaces it from the page. */
.library-banner { max-width: 1900px; margin: auto; padding: 30px 30px 0; /* D129 */ }
.library-banner > .notice { margin-bottom: 0; /* D129 */ }
@media (max-width: 1250px) { .library-banner { padding: 24px 24px 0; /* D129 */ } }
@media (max-width: 700px) { .library-banner { padding: 20px 14px 0; /* D129 */ } }
+2
View File
@@ -40,6 +40,8 @@
<option value="system" selected>System</option>
</select></label><a class="canvas-link" href="../">ComfyUI <span aria-hidden="true">↗</span></a></div>
</header>
<!-- D129: the library-location notice, shown above every page while a node-folder library can move. -->
<div id="library-banner" class="library-banner" hidden></div>
<main id="workspace-main" tabindex="-1"></main>
<footer class="app-footer"><span>ComfyAssets · Local tools. Your library.</span></footer>
</div>