@kispace-io/core 0.7.0

package/src/components/k-log-terminal.ts

@@ -0,0 +1,337 @@
+import { css, html } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { KPart } from '../parts/k-part';
+import { createRef, ref, Ref } from 'lit/directives/ref.js';
+import { registerLogHandler, unregisterLogHandler, type LogLevel } from '../core/logger';
+import { i18n } from '../core/i18n';
+
+const t = i18n('logterminal');
+
+export interface LogMessage {
+    timestamp: Date;
+    level: LogLevel;
+    source: string;
+    message: string;
+}
+
+@customElement('k-log-terminal')
+export class KLogTerminal extends KPart {
+    @state()
+    private messages: LogMessage[] = [];
+
+    @state()
+    private autoScroll: boolean = true;
+
+    @state()
+    private filter: LogLevel | 'all' = 'all';
+
+    private containerRef: Ref<HTMLDivElement> = createRef();
+
+    connectedCallback() {
+        super.connectedCallback();
+        // Load persisted settings
+        this.loadSettings();
+        // Register this terminal as the log handler
+        registerLogHandler(this.log.bind(this));
+    }
+
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        // Unregister log handler
+        unregisterLogHandler();
+    }
+
+    public log(source: string, message: string, level: LogLevel = 'info') {
+        const logMessage: LogMessage = {
+            timestamp: new Date(),
+            level,
+            source,
+            message
+        };
+        
+        this.messages = [...this.messages, logMessage];
+        this.updateToolbar();
+        
+        if (this.autoScroll) {
+            this.updateComplete.then(() => {
+                const container = this.containerRef.value;
+                if (container) {
+                    container.scrollTop = container.scrollHeight;
+                }
+            });
+        }
+    }
+
+    public clear() {
+        this.messages = [];
+        this.updateToolbar();
+    }
+
+    private getFilteredMessages() {
+        if (this.filter === 'all') {
+            return this.messages;
+        }
+        return this.messages.filter(m => m.level === this.filter);
+    }
+
+    private formatTimestamp(date: Date): string {
+        return date.toLocaleTimeString('en-US', { 
+            hour12: false, 
+            hour: '2-digit', 
+            minute: '2-digit', 
+            second: '2-digit' 
+        });
+    }
+
+    private getLevelIcon(level: LogLevel): string {
+        switch (level) {
+            case 'info': return 'circle-info';
+            case 'warning': return 'triangle-exclamation';
+            case 'error': return 'circle-xmark';
+            case 'debug': return 'bug';
+        }
+    }
+
+    private getLevelColor(level: LogLevel): string {
+        switch (level) {
+            case 'info': return 'var(--wa-color-primary-text, #0066cc)';
+            case 'warning': return 'var(--wa-color-warning-text, #ff9800)';
+            case 'error': return 'var(--wa-color-danger-text, #dc3545)';
+            case 'debug': return 'var(--wa-color-neutral-text-subtle, #6c757d)';
+        }
+    }
+
+    protected renderToolbar() {
+        const infoCount = this.messages.filter(m => m.level === 'info').length;
+        const warningCount = this.messages.filter(m => m.level === 'warning').length;
+        const errorCount = this.messages.filter(m => m.level === 'error').length;
+        const debugCount = this.messages.filter(m => m.level === 'debug').length;
+
+        return html`
+            <k-command 
+                icon="list"
+                title="${t('ALL_LOGS')}"
+                appearance="${this.filter === 'all' ? 'filled' : 'plain'}"
+                variant="${this.filter === 'all' ? 'brand' : 'neutral'}"
+                .action=${() => {
+                    this.filter = 'all';
+                    this.saveSettings();
+                    this.updateToolbar();
+                }}>
+                ${t('ALL')} (${this.messages.length})
+            </k-command>
+
+            <k-command 
+                icon="circle-info"
+                title="${t('INFO_LOGS')}"
+                appearance="${this.filter === 'info' ? 'filled' : 'plain'}"
+                variant="${this.filter === 'info' ? 'brand' : 'neutral'}"
+                .action=${() => {
+                    this.filter = 'info';
+                    this.saveSettings();
+                    this.updateToolbar();
+                }}>
+                ${t('INFO')}${infoCount > 0 ? ` (${infoCount})` : ''}
+            </k-command>
+
+            <k-command 
+                icon="triangle-exclamation"
+                title="${t('WARNING_LOGS')}"
+                appearance="${this.filter === 'warning' ? 'filled' : 'plain'}"
+                variant="${this.filter === 'warning' ? 'brand' : 'neutral'}"
+                .action=${() => {
+                    this.filter = 'warning';
+                    this.saveSettings();
+                    this.updateToolbar();
+                }}>
+                ${t('WARNINGS')}${warningCount > 0 ? ` (${warningCount})` : ''}
+            </k-command>
+
+            <k-command 
+                icon="circle-xmark"
+                title="${t('ERROR_LOGS')}"
+                appearance="${this.filter === 'error' ? 'filled' : 'plain'}"
+                variant="${this.filter === 'error' ? 'brand' : 'neutral'}"
+                .action=${() => {
+                    this.filter = 'error';
+                    this.saveSettings();
+                    this.updateToolbar();
+                }}>
+                ${t('ERRORS')}${errorCount > 0 ? ` (${errorCount})` : ''}
+            </k-command>
+
+            <k-command 
+                icon="bug"
+                title="${t('DEBUG_LOGS')}"
+                appearance="${this.filter === 'debug' ? 'filled' : 'plain'}"
+                variant="${this.filter === 'debug' ? 'brand' : 'neutral'}"
+                .action=${() => {
+                    this.filter = 'debug';
+                    this.saveSettings();
+                    this.updateToolbar();
+                }}>
+                ${t('DEBUG')}${debugCount > 0 ? ` (${debugCount})` : ''}
+            </k-command>
+
+            <wa-divider orientation="vertical"></wa-divider>
+
+            <k-command 
+                icon="arrow-down" 
+                title="${this.autoScroll ? t('AUTO_SCROLL_ENABLED') : t('AUTO_SCROLL_DISABLED')}"
+                appearance="${this.autoScroll ? 'filled' : 'plain'}"
+                variant="${this.autoScroll ? 'brand' : 'neutral'}"
+                .action=${() => {
+                    this.autoScroll = !this.autoScroll;
+                    this.saveSettings();
+                    this.updateToolbar();
+                }}>
+                ${this.autoScroll ? t('AUTO_SCROLL') : t('MANUAL')}
+            </k-command>
+
+            <k-command 
+                icon="trash" 
+                title="${t('CLEAR_LOGS')}"
+                .action=${() => this.clear()}>
+                ${t('CLEAR')}
+            </k-command>
+        `;
+    }
+
+    render() {
+        const filteredMessages = this.getFilteredMessages();
+
+        return html`
+            <div class="log-terminal">
+                <div class="messages" ${ref(this.containerRef)}>
+                    ${filteredMessages.length === 0 
+                        ? html`<div class="empty-state">${t('NO_LOG_MESSAGES')}</div>`
+                        : filteredMessages.map(msg => html`
+                            <div class="message" data-level="${msg.level}">
+                                <span class="timestamp">${this.formatTimestamp(msg.timestamp)}</span>
+                                <wa-icon 
+                                    name="${this.getLevelIcon(msg.level)}" 
+                                    label="${msg.level}"
+                                    style="color: ${this.getLevelColor(msg.level)}">
+                                </wa-icon>
+                                <span class="source">[${msg.source}]</span>
+                                <span class="text">${msg.message}</span>
+                            </div>
+                        `)
+                    }
+                </div>
+            </div>
+        `;
+    }
+
+    static styles = css`
+        :host {
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+            width: 100%;
+        }
+
+        .log-terminal {
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+            width: 100%;
+        }
+
+        .messages {
+            flex: 1;
+            overflow-y: auto;
+            padding: 0.5rem;
+            font-family: var(--wa-font-mono);
+            font-size: 0.875rem;
+            line-height: 1.5;
+        }
+
+        .message {
+            display: flex;
+            gap: 0.5rem;
+            padding: 0.25rem 0.5rem;
+            align-items: baseline;
+            border-radius: var(--wa-border-radius-small);
+        }
+
+        .message:hover {
+            background: var(--wa-color-neutral-background-hover);
+        }
+
+        .timestamp {
+            color: var(--wa-color-neutral-text-subtle);
+            font-size: 0.75rem;
+            white-space: nowrap;
+        }
+
+        .source {
+            color: var(--wa-color-primary-text);
+            font-weight: 500;
+            white-space: nowrap;
+        }
+
+        .text {
+            color: var(--wa-color-neutral-text);
+            word-break: break-word;
+        }
+
+        .message[data-level="error"] .text {
+            color: var(--wa-color-danger-text);
+        }
+
+        .message[data-level="warning"] .text {
+            color: var(--wa-color-warning-text);
+        }
+
+        .message[data-level="debug"] .text {
+            color: var(--wa-color-neutral-text-subtle);
+        }
+
+        .empty-state {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: 100%;
+            color: var(--wa-color-neutral-text-subtle);
+            font-style: italic;
+        }
+
+        wa-icon {
+            flex-shrink: 0;
+        }
+    `;
+
+    private async loadSettings() {
+        const persisted = await this.getDialogSetting();
+        
+        if (persisted) {
+            if (typeof persisted.filter === 'string' && 
+                (persisted.filter === 'all' || ['info', 'warning', 'error', 'debug'].includes(persisted.filter))) {
+                this.filter = persisted.filter;
+            }
+            if (typeof persisted.autoScroll === 'boolean') {
+                this.autoScroll = persisted.autoScroll;
+            }
+            this.updateToolbar();
+        }
+    }
+
+    private async saveSettings() {
+        await this.setDialogSetting({
+            filter: this.filter,
+            autoScroll: this.autoScroll
+        });
+    }
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'k-log-terminal': KLogTerminal;
+    }
+    
+    interface Window {
+        logToTerminal?: (source: string, message: string, level?: LogLevel) => void;
+    }
+}
+

package/src/components/k-part-name.ts

@@ -0,0 +1,54 @@
+import {customElement} from "lit/decorators.js";
+import {KElement} from "../parts/k-element";
+import {html} from "lit";
+import {activePartSignal} from "../core/appstate";
+import {contributionRegistry, HTMLContribution} from "../core/contributionregistry";
+import {TOOLBAR_BOTTOM_CENTER} from "../core/constants";
+import '../widgets/k-icon';
+import {i18n} from "../core/i18n";
+
+const t = i18n('partname');
+
+contributionRegistry.registerContribution(TOOLBAR_BOTTOM_CENTER, {
+    html: "<k-part-name></k-part-name>"
+} as HTMLContribution)
+
+@customElement('k-part-name')
+export class KPartName extends KElement {
+    protected doBeforeUI() {
+        this.watch(activePartSignal, () => {
+            this.requestUpdate();
+        });
+    }
+    
+    private getPartName(): string {
+        const activePart = activePartSignal.get();
+        if (!activePart) {
+            return t('NO_PART');
+        }
+
+        return activePart.tabContribution?.label || activePart.getAttribute('id') || t('NO_PART');
+    }
+
+    protected render() {
+        const activePart = activePartSignal.get();
+        const partIcon = activePart?.tabContribution?.icon || "box";
+        
+        return html`
+            <wa-button 
+                appearance="plain"
+                size="small"
+                title="${t('ACTIVE_PART')}">
+                <k-icon slot="start" name="${partIcon}" label="Part"></k-icon>
+                ${this.getPartName()}
+            </wa-button>
+        `;
+    }
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'k-part-name': KPartName
+    }
+}
+

package/src/components/k-tasks.ts

@@ -0,0 +1,267 @@
+import {contributionRegistry, HTMLContribution} from "../core/contributionregistry";
+import {TOOLBAR_BOTTOM_CENTER} from "../core/constants";
+import {customElement} from "lit/decorators.js";
+import {KPart} from "../parts/k-part";
+import {css, html, render} from "lit";
+import {activeTasksSignal} from "../core/appstate";
+import {taskService, ProgressMonitor} from "../core/taskservice";
+import {i18n} from "../core/i18n";
+
+const t = i18n('tasks');
+
+contributionRegistry.registerContribution(TOOLBAR_BOTTOM_CENTER, {
+    html: "<k-tasks></k-tasks>"
+} as HTMLContribution)
+
+// Singleton dialog container for progress dialog
+let progressDialogContainer: HTMLElement | null = null;
+
+function getProgressDialogContainer(): HTMLElement {
+    if (!progressDialogContainer) {
+        progressDialogContainer = document.createElement('div');
+        progressDialogContainer.id = 'progress-dialog-container';
+        document.body.appendChild(progressDialogContainer);
+    }
+    return progressDialogContainer;
+}
+
+function getDialogElement(): any {
+    const container = getProgressDialogContainer();
+    return container.querySelector('wa-dialog') as any;
+}
+
+function showProgressDialog() {
+    updateProgressDialog(true);
+}
+
+function updateProgressDialog(forceOpen = false) {
+    const container = getProgressDialogContainer();
+    const tasks = taskService.getActiveTasks();
+    const currentTaskCount = tasks.length;
+    
+    if (currentTaskCount === 0) {
+        render(html``, container);
+        return;
+    }
+
+    // Check if dialog exists and is open (before rendering, since render replaces DOM)
+    const existingDialog = getDialogElement();
+    const isOpen = forceOpen || (existingDialog?.open === true);
+
+    // Only update dialog if it's open or if we're forcing it open
+    // If it was closed (dismissed), don't show it again on progress updates
+    if (!isOpen) {
+        return;
+    }
+
+    const handleClose = () => {
+        // Close the dialog - this prevents it from showing again on progress updates
+        const dialog = getDialogElement();
+        if (dialog) {
+            dialog.open = false;
+        }
+    };
+
+    const handleAfterHide = () => {
+        // Clean up after the dialog closes and animations complete
+        render(html``, container);
+    };
+
+    const template = html`
+        <wa-dialog 
+            label="${t('ACTIVE_TASKS')}" 
+            open
+            light-dismiss
+            style="--width: 600px;"
+            @wa-request-close=${handleClose}
+            @wa-after-hide=${handleAfterHide}
+        >
+            <style>
+                .progress-dialog-content {
+                    display: flex;
+                    flex-direction: column;
+                    gap: 1.5rem;
+                }
+                
+                .task-item {
+                    display: flex;
+                    flex-direction: column;
+                    gap: 0.75rem;
+                    padding: 1rem;
+                    background: var(--wa-color-neutral-10);
+                    border-radius: 8px;
+                    border: 1px solid var(--wa-color-neutral-20);
+                }
+                
+                :host-context(.wa-light) .task-item {
+                    background: var(--wa-color-neutral-95);
+                    border: 1px solid var(--wa-color-neutral-85);
+                }
+                
+                .task-header {
+                    display: flex;
+                    align-items: center;
+                    gap: 0.75rem;
+                }
+                
+                .task-name {
+                    font-weight: 600;
+                    font-size: 1rem;
+                    color: var(--wa-color-neutral-90);
+                }
+                
+                :host-context(.wa-light) .task-name {
+                    color: var(--wa-color-neutral-10);
+                }
+                
+                .task-message {
+                    font-size: 0.875rem;
+                    color: var(--wa-color-neutral-70);
+                    margin-top: 0.25rem;
+                }
+                
+                :host-context(.wa-light) .task-message {
+                    color: var(--wa-color-neutral-30);
+                }
+                
+                .task-progress {
+                    margin-top: 0.5rem;
+                }
+                
+                wa-progress-bar {
+                    --track-height: 1.5rem;
+                }
+                
+                wa-progress-bar::part(label) {
+                    text-align: center;
+                    width: 100%;
+                    font-size: 0.875rem;
+                }
+                
+                .no-tasks {
+                    text-align: center;
+                    padding: 2rem;
+                    color: var(--wa-color-neutral-60);
+                }
+                
+                :host-context(.wa-light) .no-tasks {
+                    color: var(--wa-color-neutral-40);
+                }
+            </style>
+            
+            <div class="progress-dialog-content">
+                ${tasks.map((taskProgress: ProgressMonitor) => {
+                    const hasProgress = taskProgress.progress >= 0 || taskProgress.totalSteps > 0
+                    const progress = taskProgress.progress >= 0
+                        ? taskProgress.progress
+                        : (taskProgress.totalSteps > 0 
+                            ? Math.round((taskProgress.currentStep / taskProgress.totalSteps) * 100)
+                            : 0)
+                    
+                    const showSteps = taskProgress.progress < 0 && taskProgress.totalSteps > 0
+                    
+                    return html`
+                        <div class="task-item">
+                            <div class="task-header">
+                                <wa-icon name="hourglass" style="color: var(--wa-color-warning-fill-loud);"></wa-icon>
+                                <div style="flex: 1;">
+                                    <div class="task-name">${taskProgress.name}</div>
+                                    ${taskProgress.message ? html`
+                                        <div class="task-message">${taskProgress.message}</div>
+                                    ` : ''}
+                                </div>
+                            </div>
+                            <div class="task-progress">
+                                ${hasProgress ? html`
+                                    <wa-progress-bar value="${progress}">
+                                        ${showSteps ? `${taskProgress.currentStep}/${taskProgress.totalSteps} - ` : ''}${progress}%
+                                    </wa-progress-bar>
+                                ` : html`
+                                    <wa-progress-bar indeterminate></wa-progress-bar>
+                                `}
+                            </div>
+                        </div>
+                    `
+                })}
+            </div>
+        </wa-dialog>
+    `;
+
+    render(template, container);
+}
+
+@customElement('k-tasks')
+export class KTasks extends KPart {
+    static styles = css`
+        :host {
+            display: flex;
+            align-items: center;
+        }
+        
+        .task-indicator {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            cursor: pointer;
+            padding: 0.25rem 0.5rem;
+            border-radius: 4px;
+            transition: background-color 0.2s;
+        }
+        
+        .task-indicator:hover {
+            background: var(--wa-color-neutral-15);
+        }
+        
+        :host-context(.wa-light) .task-indicator:hover {
+            background: var(--wa-color-neutral-85);
+        }
+        
+        .task-count {
+            font-size: 0.875rem;
+            color: var(--wa-color-neutral-70);
+        }
+        
+        :host-context(.wa-light) .task-count {
+            color: var(--wa-color-neutral-30);
+        }
+    `
+
+    protected doBeforeUI() {
+        this.watch(activeTasksSignal, () => {
+            // Update dialog content if it's open, and always update the indicator
+            updateProgressDialog();
+            this.requestUpdate();
+        });
+    }
+
+    private handleIndicatorClick() {
+        // Show the dialog when clicking the hourglass
+        showProgressDialog();
+    }
+
+    protected render() {
+        activeTasksSignal.get()
+        const tasks = taskService.getActiveTasks();
+        const taskCount = tasks.length;
+        
+        if (taskCount === 0) {
+            return html``;
+        }
+        
+        return html`
+            <div class="task-indicator" @click=${this.handleIndicatorClick} title="${t('ACTIVE_TASKS_TITLE', { taskCount: taskCount.toString() })}">
+                <wa-spinner 
+                    style="font-size: 1rem; --indicator-color: var(--wa-color-warning-fill-loud);" 
+                    label="${t('ACTIVE_TASKS')}"
+                ></wa-spinner>
+                <span class="task-count">${taskCount}</span>
+            </div>
+        `
+    }
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'k-tasks': KTasks
+    }
+}