/* global React, Icon */
const { useState, useEffect, useRef } = React;
function isCallbackPath(value) {
return value === '/auth/callback'
|| value.startsWith('/auth/callback?')
|| value === '/workspace/workspace'
|| value.startsWith('/workspace/workspace?');
}
function validateRoutePath(path) {
const value = String(path || '').trim();
if (!value) return null;
const normalized = value.startsWith('/') ? value : `/${value}`;
if (!isSafeRoutePath(normalized)) return null;
if (/%[0-9A-Fa-f]{2}/.test(normalized)) {
let decoded;
try {
decoded = decodeURIComponent(normalized);
} catch {
return null;
}
if (!isSafeRoutePath(decoded)) return null;
if (isCallbackPath(decoded)) return null;
}
if (isCallbackPath(normalized)) return null;
return normalized;
}
function isSafeRoutePath(path) {
return /^\/[A-Za-z0-9_\-/?&=.%+]*$/.test(path) &&
!path.startsWith('//') &&
!path.startsWith('\\\\') &&
!path.includes('\\') &&
!path.includes(':') &&
!path.includes('#');
}
function normalizeRoutePath(path) {
const nextPath = String(path || '/dashboard').trim() || '/dashboard';
return nextPath.startsWith('/') ? nextPath : `/${nextPath}`;
}
function legacyHashRoutePath() {
if (!window.location.hash || !window.location.hash.startsWith('#/')) return null;
return validateRoutePath(window.location.hash.slice(1));
}
function getBrowserRoutePath() {
if (
window.location.pathname === '/auth/callback'
|| window.location.pathname === '/workspace/workspace'
) {
// Both /auth/callback and the legacy /workspace/workspace are recognized
// callback URLs. Preserving the search string keeps ?code=... and ?next=...
// intact for completeAuthCallback. Hash canonicalization runs AFTER auth
// parsing in api-client.jsx.
return `${window.location.pathname}${window.location.search || ''}`;
}
const legacyPath = legacyHashRoutePath();
if (legacyPath) {
window.history.replaceState(null, document.title, legacyPath);
return legacyPath;
}
const pathname = window.location.pathname;
if (pathname && pathname !== '/') {
return `${pathname}${window.location.search || ''}`;
}
return '/dashboard';
}
function pushBrowserRoute(path) {
const nextPath = normalizeRoutePath(path);
window.history.pushState(null, document.title, nextPath);
window.dispatchEvent(new Event('armature:routechange'));
return nextPath;
}
function splitRoutePath(path) {
const normalized = String(path || '/dashboard');
const queryStart = normalized.indexOf('?');
if (queryStart === -1) return { pathname: normalized, queryString: '' };
return {
pathname: normalized.slice(0, queryStart) || '/dashboard',
queryString: normalized.slice(queryStart + 1),
};
}
function useRoute() {
const [path, setPath] = useState(() => getBrowserRoutePath());
useEffect(() => {
const h = () => setPath(getBrowserRoutePath());
window.addEventListener('armature:routechange', h);
window.addEventListener('popstate', h);
return () => {
window.removeEventListener('armature:routechange', h);
window.removeEventListener('popstate', h);
};
}, []);
const { pathname, queryString } = splitRoutePath(path);
const parts = pathname.split('/').filter(Boolean);
return {
path: pathname,
parts,
queryString,
navigate: (p, options = {}) => {
const nextPath = normalizeRoutePath(p);
if (options?.replace) {
window.history.replaceState(null, document.title, nextPath);
} else {
window.history.pushState(null, document.title, nextPath);
}
setPath(nextPath);
},
};
}
function getInitials(displayName, email) {
const src = (displayName || '').trim() || (email || '').split('@')[0] || '';
if (!src) return 'U';
const parts = src.replace(/[._-]+/g, ' ').split(/\s+/).filter(Boolean);
const letters = parts.length >= 2
? parts[0][0] + parts[parts.length - 1][0]
: src.slice(0, 2);
return letters.toUpperCase();
}
function Sidebar({ activeKey, onNav, me, collapsed, onToggleCollapse, onSignOut }) {
const [accountMenuOpen, setAccountMenuOpen] = useState(false);
const accountMenuRef = useRef(null);
const accountMenuTriggerRef = useRef(null);
const accountMenuItemRefs = useRef([]);
// Three divider-separated groups, no section labels. Order is fixed.
const navGroups = [
[{ key: 'insights', icon: 'sparkles', label: 'Insights', href: '/insights' }],
[
{ key: 'workflows', icon: 'workflow', label: 'Workflows', href: '/workflows' },
{ key: 'tool-monitors', icon: 'zap', label: 'Tool monitors', href: '/tool-monitors' },
{ key: 'sources', icon: 'plug', label: 'My MCPs & CLIs', href: '/sources' },
],
[{ key: 'benchmark', icon: 'chart', label: 'Benchmark', href: '/benchmark' }],
];
const accountMenuItems = [
{ key: 'organization', icon: 'settings', label: 'Organization settings', href: '/settings/organization' },
{ key: 'profile', icon: 'user', label: 'Profile', href: '/settings/profile' },
{ key: 'billing', icon: 'creditCard', label: 'Billing', href: '/settings/billing' },
{ key: 'api-keys', icon: 'key', label: 'API keys', href: '/settings/api-keys' },
{ key: 'alerts', icon: 'bell', label: 'Alerts', href: '/settings/alerts' },
{ key: 'invitations', icon: 'mail', label: 'Invite team members', href: '/settings/invitations' },
];
useEffect(() => {
if (!accountMenuOpen) return undefined;
const focusFrame = window.requestAnimationFrame(() => {
accountMenuItemRefs.current[0]?.focus();
});
const closeOnOutsideClick = (event) => {
if (!accountMenuRef.current?.contains(event.target)) {
setAccountMenuOpen(false);
}
};
const closeOnEscape = (event) => {
if (event.key === 'Escape') {
event.preventDefault();
setAccountMenuOpen(false);
accountMenuTriggerRef.current?.focus();
}
};
document.addEventListener('mousedown', closeOnOutsideClick);
document.addEventListener('keydown', closeOnEscape);
return () => {
window.cancelAnimationFrame(focusFrame);
document.removeEventListener('mousedown', closeOnOutsideClick);
document.removeEventListener('keydown', closeOnEscape);
};
}, [accountMenuOpen]);
function handleAccountMenuKeyDown(event) {
const items = accountMenuItemRefs.current.filter(Boolean);
const currentIndex = items.indexOf(document.activeElement);
if (event.key === 'Tab') {
setAccountMenuOpen(false);
return;
}
if (event.key === 'Home') {
event.preventDefault();
items[0]?.focus();
} else if (event.key === 'End') {
event.preventDefault();
items[items.length - 1]?.focus();
} else if (event.key === 'ArrowDown') {
event.preventDefault();
items[(currentIndex + 1) % items.length]?.focus();
} else if (event.key === 'ArrowUp') {
event.preventDefault();
items[(currentIndex - 1 + items.length) % items.length]?.focus();
}
}
function navigateFromAccountMenu(href) {
setAccountMenuOpen(false);
onNav(href);
}
return (
);
}
function StatusBadge({ status }) {
const map = {
success: { cls: 'badge-success', label: 'Success' },
partial: { cls: 'badge-warning', label: 'Partial' },
failed: { cls: 'badge-fail', label: 'Failed' },
running: { cls: 'badge-running', label: 'Running' },
pending: { cls: 'badge-pending', label: 'Pending' },
system_issue: { cls: 'badge-warning', label: 'System issue' },
canceled: { cls: 'badge-neutral', label: 'Canceled' },
};
const m = map[status] || map.pending;
return {m.label};
}
function displayModelName(name) {
if (!name) return '';
return String(name).replace(/^Claude\s+/i, '');
}
function ModelBadge({ id = '', name = '' }) {
if (!id && !name) return —;
return (
{displayModelName(name) || id}
);
}
function EmptyState({ icon = 'activity', title, body, action = null }) {
return (
{title}
{body &&
{body}
}
{action}
);
}
window.useRoute = useRoute;
window.Sidebar = Sidebar;
window.StatusBadge = StatusBadge;
window.ModelBadge = ModelBadge;
window.displayModelName = displayModelName;
window.EmptyState = EmptyState;