@pb33f/cowboy-components 0.7.18 → 0.8.0

package/dist/components/global-task/global-task-view.css.js

@@ -0,0 +1,392 @@
+import { css } from 'lit';
+export default css `
+    :host {
+        display: block;
+        position: fixed;
+        z-index: 1000;
+        font-family: var(--font-stack), sans-serif;
+    }
+
+    .micro-view {
+        position: fixed;
+        bottom: 20px;
+        right: 20px;
+        background: var(--background-color);
+        border: 1px solid var(--secondary-color);
+        border-radius: 0;
+        padding: 8px;
+        width: 80px;
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        text-align: right;
+        gap: 5px;
+        cursor: pointer;
+        transition: all 0.2s ease;
+    }
+
+    .micro-view:hover {
+        border-color: var(--secondary-color);
+    }
+
+    .micro-view sl-icon-button {
+        margin: 0;
+        padding: 0;
+    }
+
+    .micro-view sl-badge {
+        font-family: var(--font-stack), sans-serif;
+    }
+
+
+    .progress-text {
+        font-size: 0.9rem;
+        display: inline-block;
+        width: 40px;
+        font-family: var(--font-stack), sans-serif; 
+    }
+    
+    sl-badge::part(base) {
+        width: 40px;
+        background-color: var(--background-color);
+        border: 1px solid var(--secondary-color);
+        color: var(--secondary-color);
+    }
+
+    .collapsed-view {
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        background: var(--background-color);
+        border-top: 2px solid var(--secondary-color);
+        padding: 5px 20px 20px 20px;
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        cursor: pointer;
+    }
+    
+    .collapsed-view.shader-mode {
+        padding: 0;
+        overflow: hidden;
+        gap: 0;
+    }
+    
+    .collapsed-view.shader-mode .collapsed-header {
+        padding: 5px 20px;
+        background: var(--background-color);
+        border-bottom: 1px solid var(--secondary-color);
+        margin-bottom: 0;
+    }
+    
+    .shader-area {
+        height: 200px;
+        width: 100%;
+        position: relative;
+        background: var(--terminal-background);
+        margin-top: 0;
+    }
+
+    .collapsed-header {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        border-bottom: 1px dashed var(--secondary-color);
+    }
+
+    .collapsed-header sl-icon-button {
+        margin: 0;
+    }
+
+    .task-count {
+        flex: 1;
+
+        font-size: 14px;
+        font-weight: 500;
+    }
+
+    .overall-progress {
+        --height: 8px;
+        --indicator-color: var(--primary-color);
+    }
+
+    .current-message {
+        font-size: 12px;
+        font-family: var(--font-stack), sans-serif;
+        white-space: nowrap;
+        color: var(--tertiary-color);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        text-transform: uppercase;
+    }
+
+    .task-drawer::part(base) {
+        border-radius: 0;
+    }
+
+    .task-drawer::part(body) {
+        padding: 0;
+    }
+
+    .task-drawer::part(panel) {
+        height: 42vh;
+        min-height: 300px;
+    }
+
+    .expanded-view {
+        display: grid;
+        grid-template-columns: 35% 65%;
+        height: 100%;
+        background: var(--background-color);
+    }
+
+    .task-panel {
+        border-right: 1px solid var(--secondary-color);
+        padding: 20px;
+        overflow-y: auto;
+        background: var(--background-color);
+        text-transform: uppercase;
+    }
+
+    .task-panel h3 {
+        margin: 0 0 16px 0;
+        font-size: 16px;
+        font-weight: 600;
+        letter-spacing: 0.05em;
+        
+    }
+
+    .task-tree {
+        --indent-size: 20px;
+        --indent-guide-width: 1px;
+        --indent-guide-color: var(--sl-color-neutral-700);
+    }
+
+    .task-item {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 4px 0;
+    }
+
+    .status-icon {
+        font-size: 14px;
+    }
+
+    .status-icon.active {
+        color: var(--primary-color);
+        animation: spin 1s linear infinite;
+    }
+
+    .status-icon.completed {
+        color: var(--terminal-text);
+    }
+
+    .status-icon.failed {
+        color: var(--error-color);
+    }
+
+    @keyframes spin {
+        from { transform: rotate(0deg); }
+        to { transform: rotate(360deg); }
+    }
+
+
+    sl-badge.status::part(base) {
+        width: 40px;
+        background-color: var(--background-color);
+        border: 1px solid var(--primary-color);
+        color: var(--primary-color);
+    }
+    
+    .task-name {
+        flex: 1;
+        font-size: 13px;
+        font-family: var(--font-stack), sans-serif;
+    }
+
+    .no-tasks {
+        padding: 20px;
+        text-align: center;
+    }
+
+    .right-panel {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        overflow: hidden;
+    }
+
+    .progress-section {
+        padding: 10px 10px 0 10px;
+        background: var(--background-color);
+        min-height: fit-content;
+        overflow-y: auto;
+    }
+
+    .progress-section label {
+        display: block;
+        font-size: 12px;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        margin-bottom: 8px;
+    }
+
+    .main-progress {
+        --height: 20px;
+        --indicator-color: var(--primary-color);
+        margin-bottom: 16px;
+    }
+
+    .main-progress::part(label) {
+        font-family: var(--font-stack), sans-serif;
+        font-weight: bold;
+    }
+
+    .subtask-progress {
+        --height: 12px;
+        --indicator-color: var(--primary-color);
+    }
+
+    .subtask-progress::part(label) {
+        font-family: var(--font-stack);
+        font-size: 11px;
+    }
+
+    .task-progress {
+        margin-bottom: 12px;
+    }
+
+    .task-progress label {
+        font-size: 11px;
+        margin-bottom: 4px;
+        text-transform: uppercase;
+    }
+
+    .console-wrapper {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        min-height: 60%;
+        border-radius: 0;
+    }
+
+    .console-header {
+        padding: 8px 12px;
+        font-size: 12px;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        border-bottom: 1px dashed var(--secondary-color);
+    }
+
+    .console-content {
+        flex: 1;
+        overflow-y: auto;
+        padding: 12px;
+        font-family: var(--font-stack), sans-serif;
+        font-size: 12px;
+        line-height: 1.6;
+    }
+
+    .console-content::-webkit-scrollbar {
+        width: 8px;
+    }
+
+    .console-content::-webkit-scrollbar-track {
+        //background: var(--sl-color-neutral-900);
+    }
+
+    .console-content::-webkit-scrollbar-thumb {
+        //background: var(--sl-color-neutral-700);
+        border-radius: 0;
+    }
+
+    .console-message {
+        display: flex;
+        align-items: flex-start;
+        gap: 8px;
+        margin-bottom: 4px;
+        opacity: 0.7;
+        transition: opacity 0.2s;
+    }
+
+    .console-message.active {
+        opacity: 1;
+    }
+
+    .console-message .chevron {
+        min-width: 16px;
+        font-family: var(--font-stack);
+    }
+
+    .console-message.error {
+        color: var(--sl-color-danger-400);
+    }
+
+    .console-message.error .chevron {
+        font-size: 10px;
+        padding-top: 2px;
+    }
+
+    .console-message.warning {
+        color: var(--sl-color-warning-400);
+    }
+
+    .console-message.success {
+        color: var(--sl-color-success-400);
+    }
+
+    .console-message .timestamp {
+        color: var(--sl-color-neutral-500);
+        font-size: 11px;
+        white-space: nowrap;
+    }
+
+    .console-message .message-text {
+        flex: 1;
+        word-wrap: break-word;
+    }
+
+    .console-message.active .message-text {
+        text-shadow: 0 0 8px currentColor;
+        font-weight: 500;
+    }
+
+    :host-context(html[theme="light"]) .console-message.active .message-text {
+        text-shadow: none;
+    }
+
+    sl-tree-item::part(expand-button) {
+        color: var(--sl-color-neutral-500);
+    }
+
+    sl-tree-item::part(label) {
+        font-family: var(--font-stack);
+    }
+    
+    .sub-tasks {
+        max-height: 160px;
+        overflow-y: auto;
+        padding-right: 5px;
+    }
+
+
+    .sub-tasks::-webkit-scrollbar {
+        width: 8px;
+    }
+
+    .sub-tasks::-webkit-scrollbar-track {
+        background-color: var(--terminal-background);
+    }
+
+    .sub-tasks::-webkit-scrollbar-thumb {
+        box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+        background: var(--secondary-color-lowalpha);
+        padding: var(--global-padding);
+    }
+
+
+
+`;

package/dist/components/global-task/global-task-view.d.ts

@@ -0,0 +1,48 @@
+import { LitElement } from 'lit';
+import { Task } from '../../model/task';
+import { GlobalTaskController } from '../../controllers/global-task-controller';
+import { TerminalMessage } from '../terminal-emulator/terminal-emulator';
+import '@shoelace-style/shoelace/dist/components/drawer/drawer.js';
+import '@shoelace-style/shoelace/dist/components/progress-bar/progress-bar.js';
+import '@shoelace-style/shoelace/dist/components/icon-button/icon-button.js';
+import '@shoelace-style/shoelace/dist/components/badge/badge.js';
+import '@shoelace-style/shoelace/dist/components/tree/tree.js';
+import '@shoelace-style/shoelace/dist/components/tree-item/tree-item.js';
+import '@shoelace-style/shoelace/dist/components/format-date/format-date.js';
+import SlDrawer from '@shoelace-style/shoelace/dist/components/drawer/drawer.js';
+import '../shader-canvas/shader-canvas';
+import '../waiting-line/waiting-line';
+import { ShaderModule } from '../shaders/shader-base';
+export type ViewMode = 'micro' | 'collapsed' | 'expanded';
+export declare class GlobalTaskView extends LitElement {
+    static styles: import("lit").CSSResult[];
+    mode: ViewMode;
+    mockMode: boolean;
+    tasks: Task[];
+    overallProgress: number;
+    activeTaskCount: number;
+    currentMessage: string;
+    consoleMessages: TerminalMessage[];
+    hasReceivedData: boolean;
+    selectedShader: ShaderModule;
+    drawer: SlDrawer;
+    consoleContent: HTMLDivElement;
+    controller: GlobalTaskController;
+    private pendingDrawerTimeout?;
+    private messageTimeoutId?;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    setController(controller: GlobalTaskController): void;
+    updated(changedProperties: Map<string, any>): void;
+    updateTasks(tasks: Task[], overallProgress: number): void;
+    addConsoleMessage(message: TerminalMessage): void;
+    updateConsoleMessages(messages: TerminalMessage[]): void;
+    private handleClick;
+    private toggleMode;
+    private populateTerminal;
+    private handleDrawerClose;
+    private minimizeToMicro;
+    private renderTask;
+    render(): import("lit-html").TemplateResult<1>;
+}