bsodfather/crank
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: polish alpine shell feedback

Browse Source
This commit is contained in:
a.tolmachev
2026-03-31 12:32:05 +03:00
parent 84f4437ce0
commit 4d91ccf48f
16 changed files with 366 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
TASKS.md
+6 -6
View File
@@ -2,19 +2,19 @@
## Current
### `feat/demo-assets`
### `feat/alpine-polish`
Status: in_progress
DoD:
- project has an idempotent PostgreSQL demo seed for live UI screens
- demo seed fills workspaces, memberships, invitations, operations, agents, keys and usage
- seed is controlled by env and does not live in migrations
- docs explain how to enable and use demo data
- Alpine UI pages have consistent feedback and shell state
- alert()-based errors are removed from primary screens
- header identity reflects live session and current workspace
- settings and workspace flows avoid crude localStorage/logout workarounds
## Next
- `feat/alpine-polish`
- `feat/current-workspace-session-model`
## Backlog
apps/ui/css/pages.css
+80
View File
@@ -125,6 +125,77 @@
.btn-icon.danger:hover { background: var(--red-bg); color: var(--red); border-color: var(--red-border); }
/* ══════════════════════════════════════════════════
TOASTS
══════════════════════════════════════════════════ */
.toast-stack {
position: fixed;
top: 84px;
right: 20px;
z-index: 1200;
width: min(360px, calc(100vw - 32px));
display: flex;
flex-direction: column;
gap: 10px;
pointer-events: none;
}
.toast-card {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px 16px;
border-radius: 14px;
border: 1px solid var(--border);
background: rgba(15, 23, 34, 0.96);
box-shadow: 0 18px 48px rgba(0, 0, 0, 0.32);
pointer-events: auto;
transition: opacity 0.18s ease, transform 0.18s ease;
}
.toast-card.closing {
opacity: 0;
transform: translateY(-6px);
}
.toast-info { border-color: rgba(56, 189, 248, 0.28); }
.toast-success { border-color: rgba(63, 185, 80, 0.32); }
.toast-error { border-color: rgba(248, 81, 73, 0.34); }
.toast-copy {
min-width: 0;
flex: 1;
}
.toast-title {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.02em;
color: var(--text-primary);
margin-bottom: 3px;
}
.toast-message {
font-size: 12.5px;
line-height: 1.5;
color: var(--text-secondary);
}
.toast-close {
width: 22px;
height: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
background: transparent;
color: var(--text-muted);
cursor: pointer;
flex-shrink: 0;
}
.toast-close:hover { color: var(--text-primary); }
/* ══════════════════════════════════════════════════
SECTION CARD
══════════════════════════════════════════════════ */
@@ -1456,3 +1527,12 @@
flex-shrink: 0;
opacity: 0.7;
}
@media (max-width: 900px) {
.toast-stack {
top: 72px;
right: 16px;
left: 16px;
width: auto;
}
}
apps/ui/html/agents.html
+2 -1
View File
@@ -15,6 +15,7 @@
<script src="js/i18n.js"></script>
<script src="js/workspace.js"></script>
<script src="js/api.js"></script>
<script src="js/ui-feedback.js"></script>
<script src="js/auth.js"></script>
<script>window.CrankAuth.guardProtectedPage();</script>
</head>
@@ -292,7 +293,7 @@
<input class="form-input input-mono" type="text" placeholder="customer-support" autocomplete="off"
:value="form.slug" @input="onSlugInput($event.target.value)">
<div class="form-hint" x-show="form.slug">
MCP endpoint: <code style="font-family:monospace;font-size:11px;color:var(--accent)" x-text="'/mcp/v1/' + (localStorage.getItem('crank_workspace') || 'acme-workspace') + '/' + form.slug"></code>
MCP endpoint: <code style="font-family:monospace;font-size:11px;color:var(--accent)" x-text="'/mcp/v1/' + (localStorage.getItem('crank_workspace_slug') || 'default') + '/' + form.slug"></code>
</div>
</div>
apps/ui/html/api-keys.html
+1
View File
@@ -26,6 +26,7 @@
<script src="js/config.js"></script>
<script src="js/i18n.js"></script>
<script src="js/api.js"></script>
<script src="js/ui-feedback.js"></script>
<script src="js/auth.js"></script>
<script>window.CrankAuth.guardProtectedPage();</script>
<script src="js/workspace.js"></script>
apps/ui/html/settings.html
+4 -3
View File
@@ -13,6 +13,7 @@
<script src="js/config.js"></script>
<script src="js/i18n.js"></script>
<script src="js/api.js"></script>
<script src="js/ui-feedback.js"></script>
<script src="js/workspace.js"></script>
<script src="js/auth.js"></script>
<script>window.CrankAuth.guardProtectedPage();</script>
@@ -542,21 +543,21 @@
<div class="danger-zone-title">Rename workspace</div>
<div class="danger-zone-desc">Changes the workspace slug used in all API endpoints. Existing API keys will continue to work. All existing tool call references will break.</div>
</div>
<button class="btn-danger" type="button">Rename</button>
<button class="btn-danger" id="settings-ws-rename-btn" type="button">Rename</button>
</div>
<div class="danger-zone-action">
<div class="danger-zone-text">
<div class="danger-zone-title">Export all data</div>
<div class="danger-zone-desc">Download a ZIP archive of all operation configs, schemas, mappings and invocation history as JSON. May take a few minutes.</div>
</div>
<button class="btn-danger" type="button">Export</button>
<button class="btn-danger" id="settings-ws-export-btn" type="button">Export</button>
</div>
<div class="danger-zone-action">
<div class="danger-zone-text">
<div class="danger-zone-title">Delete workspace</div>
<div class="danger-zone-desc">Permanently deletes all operations, keys, logs and settings. This action cannot be undone. You will be logged out immediately.</div>
</div>
<button class="btn-danger" type="button" onclick="if(confirm('Delete workspace? This cannot be undone.')) { localStorage.clear(); window.location.href = 'login.html'; }">Delete workspace</button>
<button class="btn-danger" id="settings-ws-delete-btn" type="button">Delete workspace</button>
</div>
</div>
</div>
apps/ui/html/wizard/index.html
+1
View File
@@ -13,6 +13,7 @@
<script src="../../js/i18n.js"></script>
<script src="../../js/workspace.js"></script>
<script src="../../js/api.js"></script>
<script src="../../js/ui-feedback.js"></script>
<script src="../../js/auth.js"></script>
<script>window.CrankAuth.guardProtectedPage();</script>
<script src="../../js/vendor/js-yaml/js-yaml.min.js"></script>
apps/ui/html/workspace-setup.html
+1
View File
@@ -14,6 +14,7 @@
<script src="js/config.js"></script>
<script src="js/i18n.js"></script>
<script src="js/api.js"></script>
<script src="js/ui-feedback.js"></script>
<script src="js/auth.js"></script>
<script>window.CrankAuth.guardProtectedPage();</script>
</head>
apps/ui/index.html
+1
View File
@@ -13,6 +13,7 @@
<script src="js/i18n.js"></script>
<script src="js/workspace.js"></script>
<script src="js/api.js"></script>
<script src="js/ui-feedback.js"></script>
<script src="js/auth.js"></script>
<script>window.CrankAuth.guardProtectedPage();</script>
</head>
apps/ui/js/agents.js
+6 -2
View File
@@ -282,7 +282,9 @@ document.addEventListener('alpine:init', function() {
await this.reload();
this.closeDrawer();
} catch (error) {
alert(error.message || 'Failed to save agent');
if (window.CrankUi) {
window.CrankUi.error(error.message || 'Failed to save agent', 'Agent update failed');
}
this.saving = false;
}
},
@@ -294,7 +296,9 @@ document.addEventListener('alpine:init', function() {
await window.CrankApi.deleteAgent(this.workspaceId, id);
await this.reload();
} catch (error) {
alert(error.message || 'Failed to delete agent');
if (window.CrankUi) {
window.CrankUi.error(error.message || 'Failed to delete agent', 'Delete failed');
}
}
},
apps/ui/js/api-keys.js
+12 -4
View File
@@ -72,7 +72,9 @@ async function revokeKey(id) {
await window.CrankApi.revokePlatformApiKey(currentWorkspaceId, id);
await loadKeys();
} catch (error) {
alert(error.message || 'Failed to revoke key');
if (window.CrankUi) {
window.CrankUi.error(error.message || 'Failed to revoke key', 'Revoke failed');
}
}
}
@@ -83,7 +85,9 @@ async function deleteKey(id) {
await window.CrankApi.deletePlatformApiKey(currentWorkspaceId, id);
await loadKeys();
} catch (error) {
alert(error.message || 'Failed to delete key');
if (window.CrankUi) {
window.CrankUi.error(error.message || 'Failed to delete key', 'Delete failed');
}
}
}
@@ -231,7 +235,9 @@ document.getElementById('modal-confirm-btn').addEventListener('click', async fun
return;
}
if (!selectedScopes.size) {
alert('Select at least one scope.');
if (window.CrankUi) {
window.CrankUi.info('Select at least one scope before creating a key.', 'Missing scope');
}
return;
}
@@ -245,7 +251,9 @@ document.getElementById('modal-confirm-btn').addEventListener('click', async fun
document.getElementById('modal-footer-done').style.display = '';
renderTable();
} catch (error) {
alert(error.message || 'Failed to create key');
if (window.CrankUi) {
window.CrankUi.error(error.message || 'Failed to create key', 'Key creation failed');
}
}
});
apps/ui/js/auth.js
+80 -3
View File
@@ -3,6 +3,20 @@
var sessionCache = null;
var sessionPromise = null;
function currentWorkspaceLabel() {
if (window.getCurrentWorkspace) {
var workspace = window.getCurrentWorkspace();
if (workspace && workspace.name) {
return workspace.name;
}
}
try {
return localStorage.getItem('crank_workspace_slug') || 'workspace';
} catch (_error) {
return 'workspace';
}
}
function isLoginPage() {
return /\/html\/login\.html$/.test(window.location.pathname);
}
@@ -21,12 +35,25 @@
try {
localStorage.removeItem(STORAGE_KEY);
} catch (_error) {}
renderShellIdentity(null);
}
function primaryMembership(session) {
return session && session.memberships && session.memberships.length
? session.memberships[0]
: null;
if (!(session && session.memberships && session.memberships.length)) {
return null;
}
if (window.getCurrentWorkspace) {
var currentWorkspace = window.getCurrentWorkspace();
if (currentWorkspace) {
var matched = session.memberships.find(function(item) {
return item.workspace && item.workspace.id === currentWorkspace.id;
});
if (matched) {
return matched;
}
}
}
return session.memberships[0];
}
function initials(displayName, email) {
@@ -56,9 +83,47 @@
} catch (_error) {}
}
function mirroredUser() {
try {
return JSON.parse(localStorage.getItem(STORAGE_KEY));
} catch (_error) {
return null;
}
}
function renderShellIdentity(session) {
var membership = primaryMembership(session);
var fallbackUser = mirroredUser();
var displayName = session && session.user
? (session.user.display_name || session.user.email || 'Crank')
: (fallbackUser && fallbackUser.name) || 'Crank';
var email = session && session.user
? session.user.email
: fallbackUser && fallbackUser.email;
var role = membership
? String(membership.role || '').replace(/^\w/, function(char) { return char.toUpperCase(); })
: (fallbackUser && fallbackUser.role) || 'Viewer';
var workspace = membership && membership.workspace
? (membership.workspace.display_name || membership.workspace.slug || membership.workspace.id)
: currentWorkspaceLabel();
var avatarValue = initials(displayName, email);
document.querySelectorAll('.nav-avatar').forEach(function(element) {
element.textContent = avatarValue;
});
document.querySelectorAll('.user-dropdown-name').forEach(function(element) {
element.textContent = displayName;
});
document.querySelectorAll('.user-dropdown-role').forEach(function(element) {
element.textContent = role + ' · ' + workspace;
});
}
function replaceSession(session) {
sessionCache = session;
persistUserMirror(session);
renderShellIdentity(session);
window.dispatchEvent(new CustomEvent('crank:sessionchange', { detail: session }));
return session;
}
@@ -144,4 +209,16 @@
logout: logout,
handleUnauthorized: handleUnauthorized,
};
window.addEventListener('crank:workspacechange', function() {
renderShellIdentity(sessionCache);
});
window.addEventListener('crank:sessionchange', function(event) {
renderShellIdentity(event.detail || sessionCache);
});
document.addEventListener('DOMContentLoaded', function() {
renderShellIdentity(sessionCache);
});
}());
apps/ui/js/catalog.js
+3 -1
View File
@@ -369,7 +369,9 @@ document.addEventListener('alpine:init', function() {
}).filter(Boolean))).sort();
this.stats = computeStats(this.operations);
} catch (error) {
alert(error.message || 'Failed to delete operation');
if (window.CrankUi) {
window.CrankUi.error(error.message || 'Failed to delete operation', 'Delete failed');
}
}
},
apps/ui/js/settings.js
+72 -1
View File
@@ -1,5 +1,20 @@
var settingsSession = null;
function settingsWorkspaceId() {
var workspace = window.getCurrentWorkspace ? window.getCurrentWorkspace() : null;
return workspace ? workspace.id : null;
}
function downloadSettingsJson(fileName, value) {
var blob = new Blob([JSON.stringify(value, null, 2)], { type: 'application/json;charset=utf-8' });
var url = URL.createObjectURL(blob);
var link = document.createElement('a');
link.href = url;
link.download = fileName;
link.click();
URL.revokeObjectURL(url);
}
function initials(displayName, email) {
var source = displayName || email || 'Crank';
return source
@@ -255,7 +270,9 @@ async function loadWorkspaceSettings() {
saveButton.textContent = 'Saved ✓';
} catch (error) {
alert(error.message || 'Failed to save workspace settings');
if (window.CrankUi) {
window.CrankUi.error(error.message || 'Failed to save workspace settings', 'Workspace save failed');
}
saveButton.textContent = original;
} finally {
setTimeout(function () {
@@ -268,11 +285,65 @@ async function loadWorkspaceSettings() {
}
}
function bindDangerZoneActions() {
var renameButton = document.getElementById('settings-ws-rename-btn');
var exportButton = document.getElementById('settings-ws-export-btn');
var deleteButton = document.getElementById('settings-ws-delete-btn');
if (renameButton && renameButton.dataset.bound !== 'true') {
renameButton.dataset.bound = 'true';
renameButton.addEventListener('click', function() {
document.getElementById('settings-ws-slug').focus();
if (window.CrankUi) {
window.CrankUi.info('Update the workspace slug above and save changes to rename it.', 'Rename workspace');
}
});
}
if (exportButton && exportButton.dataset.bound !== 'true') {
exportButton.dataset.bound = 'true';
exportButton.addEventListener('click', async function() {
var workspaceId = settingsWorkspaceId();
if (!workspaceId || !window.CrankApi) return;
try {
var snapshot = await window.CrankApi.exportWorkspace(workspaceId);
var workspace = window.getCurrentWorkspace ? window.getCurrentWorkspace() : null;
downloadSettingsJson((workspace ? workspace.slug : 'workspace') + '-snapshot.json', snapshot);
if (window.CrankUi) {
window.CrankUi.success('Workspace export downloaded.', 'Export complete');
}
} catch (error) {
if (window.CrankUi) {
window.CrankUi.error(error.message || 'Failed to export workspace', 'Export failed');
}
}
});
}
if (deleteButton && deleteButton.dataset.bound !== 'true') {
deleteButton.dataset.bound = 'true';
deleteButton.addEventListener('click', async function() {
var workspaceId = settingsWorkspaceId();
if (!workspaceId || !window.CrankApi || !window.CrankAuth) return;
if (!window.confirm('Delete workspace? This cannot be undone.')) return;
try {
await window.CrankApi.deleteWorkspace(workspaceId);
await window.CrankAuth.logout();
} catch (error) {
if (window.CrankUi) {
window.CrankUi.error(error.message || 'Failed to delete workspace', 'Delete failed');
}
}
});
}
}
document.addEventListener('DOMContentLoaded', function () {
injectLanguageSwitcher();
bindSectionNavigation();
loadProfile();
bindProfileSave();
bindPasswordSave();
bindDangerZoneActions();
loadWorkspaceSettings();
});
apps/ui/js/ui-feedback.js
+70
View File
@@ -0,0 +1,70 @@
(function() {
var CONTAINER_ID = 'crank-toast-container';
var nextToastId = 0;
function ensureContainer() {
var container = document.getElementById(CONTAINER_ID);
if (container) return container;
container = document.createElement('div');
container.id = CONTAINER_ID;
container.className = 'toast-stack';
document.body.appendChild(container);
return container;
}
function dismiss(toast) {
if (!toast || !toast.parentNode) return;
toast.classList.add('closing');
window.setTimeout(function() {
if (toast.parentNode) toast.parentNode.removeChild(toast);
}, 180);
}
function notify(options) {
var config = options || {};
var duration = config.duration === 0 ? 0 : (config.duration || 3600);
var toast = document.createElement('div');
toast.id = 'toast_' + (++nextToastId);
toast.className = 'toast-card toast-' + (config.type || 'info');
toast.innerHTML =
'<div class="toast-copy">' +
(config.title ? '<div class="toast-title">' + config.title + '</div>' : '') +
(config.message ? '<div class="toast-message">' + config.message + '</div>' : '') +
'</div>' +
'<button class="toast-close" type="button" aria-label="Dismiss">' +
'<svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round">' +
'<line x1="1" y1="1" x2="11" y2="11"></line>' +
'<line x1="11" y1="1" x2="1" y2="11"></line>' +
'</svg>' +
'</button>';
toast.querySelector('.toast-close').addEventListener('click', function() {
dismiss(toast);
});
ensureContainer().appendChild(toast);
if (duration > 0) {
window.setTimeout(function() {
dismiss(toast);
}, duration);
}
return toast.id;
}
window.CrankUi = {
notify: notify,
success: function(message, title) {
return notify({ type: 'success', title: title || 'Done', message: message });
},
error: function(message, title) {
return notify({ type: 'error', title: title || 'Request failed', message: message });
},
info: function(message, title) {
return notify({ type: 'info', title: title || 'Info', message: message });
}
};
}());
apps/ui/js/wizard.js
+3 -1
View File
@@ -1179,7 +1179,9 @@ async function saveOperation(stayOnPage) {
try {
await persistCurrentDraft(stayOnPage);
} catch (error) {
alert(error.message || 'Failed to save operation');
if (window.CrankUi) {
window.CrankUi.error(error.message || 'Failed to save operation', 'Save failed');
}
}
}
apps/ui/js/workspace-setup.js
+24 -8
View File
@@ -342,7 +342,9 @@ async function submitForm() {
submit.disabled = false;
}, 1400);
} catch (error) {
alert(error.message || 'Failed to save workspace');
if (window.CrankUi) {
window.CrankUi.error(error.message || 'Failed to save workspace', 'Save failed');
}
submit.disabled = false;
submit.textContent = originalLabel;
}
@@ -404,7 +406,9 @@ async function sendInvite() {
document.getElementById('invite-success').style.display = '';
await loadWorkspaceAccessData();
} catch (error) {
alert(error.message || 'Failed to send invite');
if (window.CrankUi) {
window.CrankUi.error(error.message || 'Failed to send invite', 'Invite failed');
}
}
}
@@ -424,7 +428,9 @@ async function updateRole(select, userId) {
renderMembers();
} catch (error) {
select.value = previous;
alert(error.message || 'Failed to update role');
if (window.CrankUi) {
window.CrankUi.error(error.message || 'Failed to update role', 'Role update failed');
}
} finally {
select.disabled = false;
}
@@ -442,7 +448,9 @@ async function removeMember(userId, name) {
await window.CrankApi.deleteMembership(workspaceFormState.workspaceId, userId);
await loadWorkspaceAccessData();
} catch (error) {
alert(error.message || 'Failed to remove member');
if (window.CrankUi) {
window.CrankUi.error(error.message || 'Failed to remove member', 'Member removal failed');
}
}
}
@@ -455,7 +463,9 @@ async function revokeInviteById(invitationId) {
await window.CrankApi.deleteInvitation(workspaceFormState.workspaceId, invitationId);
await loadWorkspaceAccessData();
} catch (error) {
alert(error.message || 'Failed to revoke invite');
if (window.CrankUi) {
window.CrankUi.error(error.message || 'Failed to revoke invite', 'Invite revoke failed');
}
}
}
@@ -489,7 +499,9 @@ async function exportWorkspaceSnapshot() {
: 'workspace';
downloadJsonFile(slug + '-snapshot.json', snapshot);
} catch (error) {
alert(error.message || 'Failed to export workspace');
if (window.CrankUi) {
window.CrankUi.error(error.message || 'Failed to export workspace', 'Export failed');
}
}
}
@@ -505,7 +517,9 @@ async function deleteWorkspaceAction() {
await window.CrankApi.deleteWorkspace(workspaceFormState.workspaceId);
await window.CrankAuth.logout();
} catch (error) {
alert(error.message || 'Failed to delete workspace');
if (window.CrankUi) {
window.CrankUi.error(error.message || 'Failed to delete workspace', 'Delete failed');
}
}
}
@@ -536,7 +550,9 @@ async function initPage() {
applyWorkspaceRecord(record);
await loadWorkspaceAccessData();
} catch (error) {
alert(error.message || 'Failed to load workspace');
if (window.CrankUi) {
window.CrankUi.error(error.message || 'Failed to load workspace', 'Workspace load failed');
}
}
}