@forgeax/interface 0.4.1

package/dist/package/browser/components/AgentAvatar/AgentAvatar.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+function AvatarArt({ agentId }) {
+    const s = {
+        stroke: 'currentColor',
+        strokeWidth: 1.35,
+        fill: 'none',
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+    };
+    switch (agentId) {
+        case 'orchestrator':
+            return (_jsxs(_Fragment, { children: [_jsx("path", { ...s, d: "M10 21h12" }), _jsx("path", { ...s, d: "M10 21V19l2.2-6.5 3.8 3.2L16 11l3 4.7L23.8 12.5 26 19v2" }), _jsx("circle", { cx: "16", cy: "9.5", r: "1.2", fill: "currentColor", stroke: "none" })] }));
+        case 'pillar':
+            return (_jsxs(_Fragment, { children: [_jsx("rect", { ...s, x: "11", y: "11", width: "10", height: "10", rx: "2" }), _jsx("circle", { cx: "16", cy: "16", r: "2", fill: "currentColor", stroke: "none" })] }));
+        case 'design':
+            return (_jsxs(_Fragment, { children: [_jsx("rect", { ...s, x: "10", y: "10", width: "12", height: "5", rx: "1" }), _jsx("rect", { ...s, x: "10", y: "16", width: "7", height: "6", rx: "1" }), _jsx("rect", { ...s, x: "18", y: "16", width: "4", height: "6", rx: "1" })] }));
+        case 'narrative':
+            return (_jsxs(_Fragment, { children: [_jsx("path", { ...s, d: "M16 10.5v10" }), _jsx("path", { ...s, d: "M16 10.5 9.5 14 10 21 16 19" }), _jsx("path", { ...s, d: "M16 10.5 22.5 14 22 21 16 19" }), _jsx("path", { ...s, d: "M12 16h8" })] }));
+        case 'art':
+            return (_jsxs(_Fragment, { children: [_jsx("path", { ...s, d: "M12.5 20.5c-0.5-3.5 2-8.5 4.5-9s4 5.5 4 9.5c0 2.2-1.8 3.8-4 3.8s-4.5-1.5-4.5-3.8" }), _jsx("path", { ...s, d: "M19.5 9.5 24 13 12.5 23.5" }), _jsx("circle", { cx: "14", cy: "17", r: "1", fill: "currentColor", stroke: "none" }), _jsx("circle", { cx: "18", cy: "16.5", r: "1", fill: "currentColor", stroke: "none" })] }));
+        case 'coding':
+            return (_jsx(_Fragment, { children: _jsx("path", { ...s, d: "M12 12 9 16l3 4M20 12l3 4-3 4" }) }));
+        case 'claude-code':
+            return (_jsxs(_Fragment, { children: [_jsx("rect", { ...s, x: "9", y: "10", width: "14", height: "12", rx: "2" }), _jsx("path", { ...s, d: "M11.5 15.5 13.5 17.5 11.5 19.5" }), _jsx("path", { ...s, d: "M15 17.5h5.5M15 20h4" })] }));
+        default:
+            return null;
+    }
+}
+const TRIBE_ACCENT = {
+    orchestrator: 'var(--color-role-orchestrator)',
+    pillar: 'var(--color-role-pillar)',
+    design: 'var(--color-role-design)',
+    narrative: 'var(--color-role-narrative)',
+    art: 'var(--color-role-art)',
+    coding: 'var(--color-role-coding)',
+    coder: 'var(--color-role-coding)',
+    'claude-code': 'var(--color-role-coding)',
+};
+export function accentForRoleTribe(tribe) {
+    return TRIBE_ACCENT[tribe] ?? 'var(--primary)';
+}
+export function AgentAvatar({ agentId, accent, fallback, size = 28, glass = false }) {
+    const art = AvatarArt({ agentId });
+    const gradId = `ag-glass-${agentId.replace(/[^a-z0-9-]/gi, '-')}`;
+    return (_jsx("span", { className: `agent-avatar agent-avatar--art${glass ? ' agent-avatar--glass' : ''}`, style: {
+            color: accent,
+            '--agent-accent': accent,
+            '--agent-size': `${size}px`,
+        }, title: fallback, children: _jsx("span", { className: "agent-avatar__frame", children: _jsxs("svg", { className: "agent-avatar__glyph", viewBox: "0 0 32 32", width: size - 3, height: size - 3, "aria-hidden": true, children: [glass && (_jsx("defs", { children: _jsxs("linearGradient", { id: gradId, x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx("stop", { offset: "0%", stopColor: "currentColor", stopOpacity: "0.12" }), _jsx("stop", { offset: "100%", stopColor: "currentColor", stopOpacity: "0" })] }) })), glass && _jsx("rect", { width: "32", height: "32", fill: `url(#${gradId})`, stroke: "none" }), art ?? (_jsx("text", { x: "16", y: "19", textAnchor: "middle", fill: "currentColor", fontSize: "10", fontWeight: "600", children: fallback.slice(0, 2) }))] }) }) }));
+}

package/dist/package/browser/components/BuildBadge/BuildBadge.d.ts

@@ -0,0 +1 @@
+export declare function BuildBadge(): import("react/jsx-runtime").JSX.Element;

package/dist/package/browser/components/BuildBadge/BuildBadge.js

@@ -0,0 +1,279 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { useTranslation } from '../../i18n';
+import { listExtensions, pickLang, } from '../../lib/extension-api';
+function tallyByKind(items) {
+    const counts = {
+        pages: 0,
+        agent: 0,
+        cliProvider: 0,
+        model: 0,
+        skill: 0,
+        tool: 0,
+        other: 0,
+    };
+    for (const p of items) {
+        if ((p.contributes?.pages?.length ?? 0) > 0)
+            counts.pages++;
+        switch (p.kind) {
+            case 'agent':
+                counts.agent++;
+                break;
+            case 'cli-provider':
+                counts.cliProvider++;
+                break;
+            case 'model':
+            case 'model-binding':
+                counts.model++;
+                break;
+            case 'skill':
+                counts.skill++;
+                break;
+            case 'tool':
+                counts.tool++;
+                break;
+            default:
+                counts.other++;
+        }
+    }
+    return counts;
+}
+const KIND_ORDER = [
+    { key: 'pages', label: 'pages', match: (p) => (p.contributes?.pages?.length ?? 0) > 0 },
+    { key: 'agent', label: 'agent', match: (p) => p.kind === 'agent' },
+    { key: 'cli-provider', label: 'cli-provider', match: (p) => p.kind === 'cli-provider' },
+    { key: 'model', label: 'model', match: (p) => p.kind === 'model' || p.kind === 'model-binding' },
+    { key: 'skill', label: 'skill', match: (p) => p.kind === 'skill' },
+    { key: 'tool', label: 'tool', match: (p) => p.kind === 'tool' },
+];
+function groupByKind(items) {
+    const used = new Set();
+    const groups = KIND_ORDER.map(({ label, match }) => {
+        const rows = items.filter((p) => match(p));
+        rows.forEach((r) => used.add(r));
+        return { label, rows };
+    }).filter((g) => g.rows.length > 0);
+    const rest = items.filter((p) => !used.has(p));
+    if (rest.length > 0)
+        groups.push({ label: 'other', rows: rest });
+    return groups;
+}
+export function BuildBadge() {
+    const { i18n } = useTranslation();
+    const locale = i18n.language;
+    const [state, setState] = useState({ status: 'loading' });
+    const [open, setOpen] = useState(false);
+    const wrapRef = useRef(null);
+    useEffect(() => {
+        let cancelled = false;
+        listExtensions()
+            .then((res) => {
+            if (cancelled)
+                return;
+            setState({
+                status: 'ok',
+                total: res.count,
+                kinds: tallyByKind(res.items),
+                items: res.items,
+            });
+        })
+            .catch((err) => {
+            if (cancelled)
+                return;
+            const msg = err instanceof Error ? err.message : String(err);
+            setState({ status: 'error', message: msg });
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, []);
+    useEffect(() => {
+        if (!open)
+            return;
+        const onDocMouseDown = (e) => {
+            if (!wrapRef.current)
+                return;
+            if (!wrapRef.current.contains(e.target))
+                setOpen(false);
+        };
+        document.addEventListener('mousedown', onDocMouseDown);
+        return () => {
+            document.removeEventListener('mousedown', onDocMouseDown);
+        };
+    }, [open]);
+    const interactive = state.status === 'ok';
+    const wrapStyle = {
+        position: 'fixed',
+        right: 8,
+        bottom: 8,
+        zIndex: 'var(--z-menu)',
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: 6,
+        padding: '4px 9px 4px 7px',
+        borderRadius: 999,
+        background: open ? 'rgba(28, 34, 40, 0.92)' : 'rgba(20, 24, 28, 0.78)',
+        color: 'var(--fg-2)',
+        fontSize: 11,
+        lineHeight: 1.2,
+        fontFamily: 'var(--mono, var(--font-mono))',
+        letterSpacing: 0.2,
+        pointerEvents: 'auto',
+        userSelect: 'none',
+        cursor: interactive ? 'pointer' : 'default',
+        boxShadow: open
+            ? 'inset 0 1px 0 rgba(255,255,255,0.10), inset 0 -1px 1px rgba(0,0,0,0.35), 0 0 0 1px rgba(212,255,72,0.42)'
+            : 'inset 0 1px 0 rgba(255,255,255,0.06), inset 0 -1px 1px rgba(0,0,0,0.30), 0 0 0 1px rgba(212,255,72,0.18)',
+        backdropFilter: 'blur(4px)',
+        WebkitBackdropFilter: 'blur(4px)',
+        transition: 'background 120ms ease, box-shadow 120ms ease',
+    };
+    const dotStyle = {
+        width: 6,
+        height: 6,
+        borderRadius: '50%',
+        background: state.status === 'ok'
+            ? 'rgba(212,255,72,0.95)'
+            : state.status === 'loading'
+                ? 'rgba(180,180,180,0.6)'
+                : 'rgba(255,90,90,0.9)',
+        boxShadow: state.status === 'ok'
+            ? '0 0 6px rgba(212,255,72,0.55)'
+            : 'none',
+        flexShrink: 0,
+    };
+    const labelStyle = {
+        color: 'rgba(212,255,72,0.92)',
+        fontWeight: 600,
+    };
+    const sepStyle = {
+        color: 'rgba(255,255,255,0.18)',
+        margin: '0 2px',
+    };
+    const kindSpan = {
+        color: 'rgba(220,228,235,0.85)',
+    };
+    let title = 'forgeax · bus plugins';
+    let content;
+    if (state.status === 'loading') {
+        content = _jsx("span", { style: kindSpan, children: "bus \u00B7 loading\u2026" });
+        title = 'forgeax · /api/extensions/list loading…';
+    }
+    else if (state.status === 'error') {
+        content = (_jsx(_Fragment, { children: _jsx("span", { style: kindSpan, children: "bus offline" }) }));
+        title = `forgeax · /api/extensions/list error: ${state.message}`;
+    }
+    else {
+        const k = state.kinds;
+        const parts = [];
+        if (k.pages)
+            parts.push(`${k.pages}pages`);
+        if (k.agent)
+            parts.push(`${k.agent}ag`);
+        if (k.cliProvider)
+            parts.push(`${k.cliProvider}cli`);
+        if (k.model)
+            parts.push(`${k.model}mdl`);
+        if (k.skill)
+            parts.push(`${k.skill}sk`);
+        if (k.tool)
+            parts.push(`${k.tool}tl`);
+        if (k.other)
+            parts.push(`${k.other}·`);
+        content = (_jsxs(_Fragment, { children: [_jsxs("span", { style: kindSpan, children: [state.total, " plugins"] }), parts.length > 0 && (_jsxs(_Fragment, { children: [_jsx("span", { style: sepStyle, children: "\u00B7" }), _jsx("span", { style: kindSpan, children: parts.join(' ') })] }))] }));
+        title = `forgeax · ${state.total} plugins live on Bus · ${parts.join(' / ')}`;
+    }
+    const popoverStyle = {
+        position: 'absolute',
+        right: 0,
+        bottom: 'calc(100% + 6px)',
+        minWidth: 260,
+        maxWidth: 340,
+        maxHeight: 380,
+        overflowY: 'auto',
+        background: 'rgba(14, 18, 22, 0.94)',
+        border: '1px solid rgba(212,255,72,0.22)',
+        borderRadius: 8,
+        boxShadow: '0 10px 28px rgba(0,0,0,0.50), inset 0 1px 0 rgba(255,255,255,0.05), 0 0 0 1px rgba(212,255,72,0.10)',
+        padding: '8px 10px 10px',
+        fontSize: 11,
+        color: 'rgba(220,228,235,0.92)',
+        backdropFilter: 'blur(6px)',
+        WebkitBackdropFilter: 'blur(6px)',
+        pointerEvents: 'auto',
+        cursor: 'default',
+    };
+    const groupHeadStyle = {
+        display: 'flex',
+        alignItems: 'baseline',
+        gap: 6,
+        margin: '6px 0 2px',
+        color: 'rgba(212,255,72,0.78)',
+        fontWeight: 600,
+        fontSize: 10,
+        letterSpacing: 0.6,
+        textTransform: 'uppercase',
+    };
+    const groupCountStyle = {
+        color: 'rgba(255,255,255,0.32)',
+        fontWeight: 400,
+    };
+    const rowStyle = {
+        display: 'flex',
+        alignItems: 'baseline',
+        gap: 6,
+        padding: '2px 0',
+        lineHeight: 1.35,
+    };
+    const rowIconStyle = {
+        width: 14,
+        display: 'inline-block',
+        textAlign: 'center',
+        color: 'rgba(212,255,72,0.85)',
+    };
+    const rowNameStyle = { color: 'rgba(232,238,244,0.92)' };
+    const rowIdStyle = {
+        color: 'rgba(255,255,255,0.28)',
+        fontSize: 10,
+        marginLeft: 'auto',
+        paddingLeft: 8,
+        fontFamily: 'inherit',
+    };
+    const popHeaderStyle = {
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        margin: '0 0 4px',
+        paddingBottom: 4,
+        borderBottom: '1px solid rgba(212,255,72,0.12)',
+    };
+    const popHintStyle = {
+        color: 'rgba(255,255,255,0.38)',
+        fontSize: 10,
+    };
+    const onBadgeClick = (e) => {
+        e.stopPropagation();
+        if (interactive)
+            setOpen((o) => !o);
+    };
+    return (_jsxs("div", { ref: wrapRef, className: "forgeax-build-badge", "data-bus-status": state.status, "data-open": open ? 'true' : 'false', style: wrapStyle, title: title, role: interactive ? 'button' : undefined, "aria-expanded": interactive ? open : undefined, tabIndex: interactive ? 0 : -1, onClick: onBadgeClick, onKeyDown: (e) => {
+            if (e.key === 'Escape') {
+                e.preventDefault();
+                setOpen(false);
+                return;
+            }
+            if (!interactive)
+                return;
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                setOpen((o) => !o);
+            }
+        }, children: [_jsx("span", { style: dotStyle, "aria-hidden": true }), _jsx("span", { style: labelStyle, children: "forgeax" }), _jsx("span", { style: sepStyle, children: "\u00B7" }), content, open && state.status === 'ok' && (_jsxs("div", { className: "forgeax-build-badge-popover", "data-open": "true", style: popoverStyle, onClick: (e) => e.stopPropagation(), children: [_jsxs("div", { style: popHeaderStyle, children: [_jsxs("span", { style: { ...labelStyle, fontSize: 11 }, children: [state.total, " bus plugins"] }), _jsx("span", { style: popHintStyle, children: "esc to close" })] }), groupByKind(state.items).map((g) => (_jsxs("div", { children: [_jsxs("div", { style: groupHeadStyle, children: [_jsx("span", { children: g.label }), _jsx("span", { style: groupCountStyle, children: g.rows.length })] }), g.rows.map((p) => {
+                                const name = pickLang(p.displayName, locale, p.id);
+                                const icon = p.icon ??
+                                    p.contributes?.activities?.[0]?.icon ??
+                                    (p.kind === 'cli-provider' ? '⌘' : p.kind === 'agent' ? '◆' : '·');
+                                const shortId = p.id.replace(/^@forgeax-plugin\//, '');
+                                return (_jsxs("div", { style: rowStyle, "data-extension-id": p.id, children: [_jsx("span", { style: rowIconStyle, "aria-hidden": true, children: icon }), _jsx("span", { style: rowNameStyle, children: name }), _jsx("span", { style: rowIdStyle, children: shortId })] }, p.id));
+                            })] }, g.label)))] }))] }));
+}