@eclipse-lyra/core 0.0.0

package/src/commands/version-info.ts

@@ -0,0 +1,214 @@
+import { registerAll } from "../core/commandregistry";
+import { html, render } from "lit";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { marked } from "marked";
+import { toastError } from "../core/toast";
+import { appLoaderService, type ReleaseEntry } from "../core/apploader";
+import { packageInfoService } from "../core/packageinfoservice";
+
+registerAll({
+    command: {
+        "id": "show_version_info",
+        "name": "Show Version Info",
+        "description": "Shows application version information",
+        "parameters": []
+    },
+    handler: {
+        execute: async _context => {
+            const app = appLoaderService.getCurrentApp();
+            if (!app) {
+                toastError("No app loaded");
+                return;
+            }
+
+            const hasPackages = packageInfoService.hasPackages();
+            const packagesTree = packageInfoService.renderTree();
+
+            let dialogContainer: HTMLElement | null = null;
+            const getDialogContainer = (): HTMLElement => {
+                if (!dialogContainer) {
+                    dialogContainer = document.getElementById('global-dialog-container') || document.createElement('div');
+                    if (!dialogContainer.id) {
+                        dialogContainer.id = 'global-dialog-container';
+                        document.body.appendChild(dialogContainer);
+                    }
+                }
+                return dialogContainer;
+            };
+
+            const cleanup = () => {
+                if (dialogContainer) {
+                    render(html``, dialogContainer);
+                }
+            };
+
+            const renderReleaseContent = (releaseContent: string) => {
+                const htmlContent = marked.parse(releaseContent, { async: false }) as string;
+                return html`${unsafeHTML(htmlContent)}`;
+            };
+
+            let releases: ReleaseEntry[] = [];
+            if (app.releaseHistory) {
+                if (typeof app.releaseHistory === 'function') {
+                    try {
+                        releases = await app.releaseHistory();
+                    } catch (error) {
+                        console.error('Failed to load release history from app:', error);
+                        releases = [];
+                    }
+                } else {
+                    releases = app.releaseHistory;
+                }
+            }
+
+            const isDev = app.version === '0.0.0';
+            const currentIndex = releases.length > 0 ? releases.findIndex(r => r.tag_name === app.version) : -1;
+            const startIndex = currentIndex >= 0 ? currentIndex : 0;
+            let currentReleaseIndex = startIndex;
+
+            const buildReleaseContent = (index: number) => {
+                if (releases.length === 0) {
+                    return "";
+                }
+
+                const release = releases[index];
+                const isCurrentVersion = release.tag_name === app.version;
+
+                let message = `**Version:** ${release.tag_name}`;
+                if (isCurrentVersion) {
+                    message += ` (Current)`;
+                }
+                message += `\n\n`;
+
+                const publishDate = new Date(release.published_at).toLocaleDateString();
+                message += `**Released:** ${publishDate}\n\n`;
+
+                if (!isCurrentVersion) {
+                    const cleanCurrent = app.version.replace(/^v/, '');
+                    const cleanRelease = release.tag_name.replace(/^v/, '');
+                    const currentParts = cleanCurrent.split('.').map(Number);
+                    const releaseParts = cleanRelease.split('.').map(Number);
+                    let isNewer = false;
+                    for (let i = 0; i < Math.max(currentParts.length, releaseParts.length); i++) {
+                        const current = currentParts[i] || 0;
+                        const releasePart = releaseParts[i] || 0;
+                        if (releasePart > current) {
+                            isNewer = true;
+                            break;
+                        }
+                        if (releasePart < current) {
+                            break;
+                        }
+                    }
+                    if (isNewer) {
+                        message += `⚠️ **Update available - reload page to update**\n\n`;
+                    }
+                }
+
+                if (release.body) {
+                    message += `---\n\n${release.body}`;
+                }
+
+                return message;
+            };
+
+            const handleClose = () => {
+                cleanup();
+            };
+
+            const handleAfterHide = () => {
+                cleanup();
+            };
+
+            const updateDialog = (index: number) => {
+                const releaseContent = buildReleaseContent(index);
+                const hasNavigation = releases.length > 0;
+
+                const template = html`
+                    <wa-dialog 
+                        label="About ${app.name} - ${app.version}"
+                        open 
+                        light-dismiss
+                        style="--width: 600px;"
+                        @wa-request-close=${handleClose}
+                        @wa-after-hide=${handleAfterHide}
+                    >
+                        <style>
+                            .dialog-content {
+                                height: 600px;
+                            }
+                            
+                            wa-tree-item > span small {
+                                color: var(--wa-color-neutral-60);
+                                font-size: 0.875em;
+                                margin-left: 0.5rem;
+                            }
+                        </style>
+                        <small>${app.description}</small>
+                        <div class="dialog-content">
+                            <wa-tab-group>
+                                ${releases.length > 0 ? html`
+                                    <wa-tab slot="nav" panel="release">Release History</wa-tab>
+                                    <wa-tab-panel name="release">
+                                        ${renderReleaseContent(releaseContent)}
+                                    </wa-tab-panel>
+                                ` : ''}
+                                
+                                ${hasPackages ? html`
+                                    <wa-tab slot="nav" panel="packages">NPM Packages</wa-tab>
+                                    <wa-tab-panel name="packages">
+                                        ${packagesTree}
+                                    </wa-tab-panel>
+                                ` : ''}
+                            </wa-tab-group>
+                        </div>
+                        <div slot="footer">
+                            ${hasNavigation ? html`
+                                <wa-button 
+                                    variant="default"
+                                    ?disabled=${index === releases.length - 1}
+                                    @click=${() => {
+                            if (index < releases.length - 1) {
+                                currentReleaseIndex = index + 1;
+                                updateDialog(currentReleaseIndex);
+                            }
+                        }}
+                                >
+                                    ← Previous
+                                </wa-button>
+                                <wa-button 
+                                    variant="default"
+                                    ?disabled=${index === 0}
+                                    @click=${() => {
+                            if (index > 0) {
+                                currentReleaseIndex = index - 1;
+                                updateDialog(currentReleaseIndex);
+                            }
+                        }}
+                                >
+                                    Next →
+                                </wa-button>
+                            ` : ''}
+                            <wa-button variant="primary" data-dialog="close">Close</wa-button>
+                        </div>
+                    </wa-dialog>
+                `;
+                render(template, getDialogContainer());
+            };
+
+            updateDialog(startIndex);
+
+            return new Promise<void>((resolve) => {
+                const checkClosed = () => {
+                    if (!dialogContainer?.querySelector('wa-dialog[open]')) {
+                        resolve();
+                    } else {
+                        setTimeout(checkClosed, 100);
+                    }
+                };
+                checkClosed();
+            });
+        }
+    }
+})
+

package/src/components/app-selector.ts

@@ -0,0 +1,233 @@
+import { html, css } from "lit";
+import { customElement, state } from "lit/decorators.js";
+import { LyraElement } from "../parts/element";
+import { appLoaderService, type AppDefinition } from "../core/apploader";
+
+@customElement('lyra-app-selector')
+export class LyraAppSelector extends LyraElement {
+    @state()
+    private apps: AppDefinition[] = [];
+    
+    @state()
+    private loading = true;
+    
+    @state()
+    private error: string | null = null;
+
+    protected async doBeforeUI() {
+        await this.loadApps();
+    }
+
+    private async loadApps() {
+        try {
+            this.loading = true;
+            this.apps = appLoaderService.getRegisteredApps();
+            this.loading = false;
+        } catch (err) {
+            this.error = err instanceof Error ? err.message : 'Failed to load apps';
+            this.loading = false;
+        }
+    }
+
+    private async selectApp(app: AppDefinition) {
+        try {
+            await appLoaderService.setPreferredAppId(app.id);
+            await appLoaderService.loadApp(app.id, document.body);
+        } catch (err) {
+            this.error = err instanceof Error ? err.message : 'Failed to load app';
+        }
+    }
+
+    protected render() {
+        if (this.loading) {
+            return html`
+                <div class="selector-container">
+                    <wa-spinner></wa-spinner>
+                    <p>Loading available apps...</p>
+                </div>
+            `;
+        }
+
+        if (this.error) {
+            return html`
+                <div class="selector-container">
+                    <wa-icon name="triangle-exclamation" class="error-icon"></wa-icon>
+                    <p class="error-message">${this.error}</p>
+                    <wa-button @click=${() => this.loadApps()}>Retry</wa-button>
+                </div>
+            `;
+        }
+
+        if (this.apps.length === 0) {
+            return html`
+                <div class="selector-container">
+                    <wa-icon name="folder-open" class="empty-icon"></wa-icon>
+                    <h2>No Apps Available</h2>
+                    <p>No applications are currently registered.</p>
+                </div>
+            `;
+        }
+
+        return html`
+            <div class="selector-container">
+                <div class="header">
+                    <h1>Select an Application</h1>
+                    <p>Choose an application to load</p>
+                </div>
+                
+                <div class="app-list">
+                    ${this.apps.map(app => html`
+                        <div 
+                            class="app-card" 
+                            @click=${() => this.selectApp(app)}
+                            @keydown=${(e: KeyboardEvent) => {
+                                if (e.key === 'Enter' || e.key === ' ') {
+                                    e.preventDefault();
+                                    this.selectApp(app);
+                                }
+                            }}
+                            tabindex="0"
+                            role="button">
+                            <div class="app-header">
+                                <h3 class="app-name">${app.name}</h3>
+                                ${app.version ? html`<span class="app-version">v${app.version}</span>` : ''}
+                            </div>
+                            ${app.description ? html`<p class="app-description">${app.description}</p>` : ''}
+                            <div class="app-id">ID: ${app.id}</div>
+                        </div>
+                    `)}
+                </div>
+            </div>
+        `;
+    }
+
+    static styles = css`
+        :host {
+            display: flex;
+            flex-direction: column;
+            width: 100%;
+            height: 100vh;
+            align-items: center;
+            justify-content: center;
+            background: var(--wa-color-neutral-background-base);
+        }
+
+        .selector-container {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            max-width: 800px;
+            width: 100%;
+            padding: 2rem;
+            box-sizing: border-box;
+        }
+
+        .header {
+            text-align: center;
+            margin-bottom: 2rem;
+        }
+
+        .header h1 {
+            margin: 0 0 0.5rem 0;
+            font-size: 2rem;
+            font-weight: 600;
+            color: var(--wa-color-neutral-foreground-loud);
+        }
+
+        .header p {
+            margin: 0;
+            color: var(--wa-color-neutral-foreground-quiet);
+        }
+
+        .app-list {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+            gap: 1rem;
+            width: 100%;
+        }
+
+        .app-card {
+            display: flex;
+            flex-direction: column;
+            padding: 1.5rem;
+            border: 1px solid var(--wa-color-neutral-border-loud);
+            border-radius: var(--wa-border-radius-medium);
+            background: var(--wa-color-neutral-background-base);
+            cursor: pointer;
+            transition: all 0.2s ease;
+            box-sizing: border-box;
+        }
+
+        .app-card:hover {
+            border-color: var(--wa-color-brand-border-loud);
+            background: var(--wa-color-brand-fill-quiet);
+            transform: translateY(-2px);
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+        }
+
+        .app-card:focus {
+            outline: 2px solid var(--wa-color-brand-border-loud);
+            outline-offset: 2px;
+        }
+
+        .app-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: flex-start;
+            margin-bottom: 0.75rem;
+        }
+
+        .app-name {
+            margin: 0;
+            font-size: 1.25rem;
+            font-weight: 600;
+            color: var(--wa-color-neutral-foreground-loud);
+            flex: 1;
+        }
+
+        .app-version {
+            font-size: 0.875rem;
+            color: var(--wa-color-neutral-foreground-quiet);
+            padding: 0.25rem 0.5rem;
+            background: var(--wa-color-neutral-fill-quiet);
+            border-radius: var(--wa-border-radius-small);
+        }
+
+        .app-description {
+            margin: 0 0 0.75rem 0;
+            color: var(--wa-color-neutral-foreground-base);
+            line-height: 1.5;
+        }
+
+        .app-id {
+            font-size: 0.75rem;
+            color: var(--wa-color-neutral-foreground-quiet);
+            font-family: monospace;
+            margin-top: auto;
+        }
+
+        .empty-icon,
+        .error-icon {
+            font-size: 4rem;
+            color: var(--wa-color-neutral-foreground-quiet);
+            margin-bottom: 1rem;
+        }
+
+        .error-message {
+            color: var(--wa-color-danger-foreground-loud);
+            margin-bottom: 1rem;
+        }
+
+        wa-spinner {
+            margin-bottom: 1rem;
+        }
+    `;
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-app-selector': LyraAppSelector;
+    }
+}
+

package/src/components/app-switcher.ts

@@ -0,0 +1,126 @@
+import { html, css } from "lit";
+import { customElement, state } from "lit/decorators.js";
+import { LyraElement } from "../parts/element";
+import { appLoaderService, type AppDefinition } from "../core/apploader";
+import { contributionRegistry } from "../core/contributionregistry";
+import { CLOSE_BUTTON, DIALOG_CONTRIBUTION_TARGET, dialogService } from "../core/dialogservice";
+
+const APP_SWITCHER_DIALOG_ID = 'app-switcher';
+
+contributionRegistry.registerContribution(DIALOG_CONTRIBUTION_TARGET, {
+    id: APP_SWITCHER_DIALOG_ID,
+    label: "Switch Application",
+    buttons: [CLOSE_BUTTON],
+    component: (state?: any) => {
+        const apps: AppDefinition[] = state?.apps || [];
+        const currentAppId: string | undefined = state?.currentAppId;
+        const selectApp = state?.selectApp as (app: AppDefinition) => void;
+
+        return html`
+            <wa-scroller orientation="vertical" style="min-width: 300px; max-height: 400px; padding: var(--wa-space-m);">
+                <div style="display: flex; flex-direction: column; gap: var(--wa-space-s);">
+                    ${apps.map(app => html`
+                        <wa-card 
+                            style="cursor: pointer;"
+                            variant=${app.id === currentAppId ? 'brand' : 'neutral'}
+                            @click=${() => selectApp(app)}>
+                            <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--wa-space-xs);">
+                                <span style="font-weight: 600;">${app.name}</span>
+                                ${app.version ? html`<wa-badge variant="neutral">v${app.version}</wa-badge>` : ''}
+                            </div>
+                            ${app.description ? html`<p style="margin: 0; font-size: 0.875rem; line-height: 1.4;">${app.description}</p>` : ''}
+                            <div style="font-size: 0.75rem; color: var(--wa-color-neutral-foreground-quiet); font-family: monospace; margin-top: var(--wa-space-xs);">ID: ${app.id}</div>
+                        </wa-card>
+                    `)}
+                </div>
+            </wa-scroller>
+        `;
+    },
+    onButton: async () => true,
+});
+
+const showAppSwitcherDialog = async (): Promise<void> => {
+    const apps = appLoaderService.getRegisteredApps();
+    const currentApp = appLoaderService.getCurrentApp();
+
+    if (apps.length === 0) {
+        return;
+    }
+
+    const state = {
+        apps,
+        currentAppId: currentApp?.id,
+        selectApp: async (app: AppDefinition) => {
+            if (app.id === currentApp?.id) {
+                state.close?.();
+                return;
+            }
+
+            try {
+                await appLoaderService.setPreferredAppId(app.id);
+                await appLoaderService.loadApp(app.id, document.body);
+            } catch (error) {
+                console.error('Failed to switch app:', error);
+            } finally {
+                state.close?.();
+            }
+        },
+        close: undefined as (() => void) | undefined,
+    };
+
+    await dialogService.open(APP_SWITCHER_DIALOG_ID, state);
+};
+
+@customElement('lyra-app-switcher')
+export class LyraAppSwitcher extends LyraElement {
+    @state()
+    private currentApp: AppDefinition | undefined;
+
+    protected doBeforeUI() {
+        this.currentApp = appLoaderService.getCurrentApp();
+        
+        const updateCurrentApp = () => {
+            this.currentApp = appLoaderService.getCurrentApp();
+            this.requestUpdate();
+        };
+        
+        window.addEventListener('app-loaded', updateCurrentApp);
+        
+        return () => {
+            window.removeEventListener('app-loaded', updateCurrentApp);
+        };
+    }
+
+    protected render() {
+        const apps = appLoaderService.getRegisteredApps();
+        const appName = this.currentApp?.name || 'No App';
+        
+        if (apps.length <= 1) {
+            return html``;
+        }
+        
+        return html`
+            <wa-button 
+                appearance="plain" 
+                size="small"
+                title="Current app: ${appName}. Click to switch applications."
+                @click=${() => showAppSwitcherDialog()}>
+                <wa-icon name="grip" style="margin-right: 0.5rem;"></wa-icon>
+                ${appName}
+            </wa-button>
+        `;
+    }
+
+    static styles = css`
+        :host {
+            display: inline-block;
+        }
+    `;
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-app-switcher': LyraAppSwitcher;
+    }
+}
+