Show YoWASP tool load progress.

Author: miyukoc

src/app.css

@@ -1,8 +1,9 @@
 @import '@xterm/xterm/css/xterm.css';
 
 :root {
-    --color-theme: #353838;
+    --color-theme: #2a312f;
     --color-accent: #88f;
+    --color-success: #5da45d;
 
     --color-page-background: oklch(from var(--color-theme) calc(l - 0.06) c h);
     --color-area-background: var(--color-theme);
@@ -24,9 +25,15 @@
     --color-button-disabled-border: var(--color-button-border);
     --color-button-disabled-text: oklch(from var(--color-button-text) 0.7 c h);
 
+    --color-progress-bar-track: oklch(from var(--color-area-background) calc(l + 0.2) c h);
+    --color-progress-bar-indicator: var(--color-accent);
+    --color-progress-bar-indicator-success: var(--color-success);
+
     --color-tree-node-line-hover-background: oklch(from var(--color-theme) 0.8 c h / 0.2);
 
-    --color-menu-background: oklch(from var(--color-theme) calc(l + 0.1) c h);
+    --color-popover-background: oklch(from var(--color-area-background) calc(l + 0.05) c h);
+
+    --color-menu-background: oklch(from var(--color-area-background) calc(l + 0.1) c h);
 
     --color-menu-item-background: var(--color-menu-background);
     --color-menu-item-hover-background: oklch(from var(--color-menu-background) calc(l + 0.05) c h);
@@ -276,6 +283,37 @@ body {
     }
 }
 
+.progress-popover {
+    padding: 8px;
+    display: grid;
+    grid-template-areas:
+        'label         progress-text'
+        'progress-bar  progress-bar ';
+    gap: 8px;
+
+    .label {
+        grid-area: label;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .progress-text {
+        grid-area: progress-text;
+        align-self: end;
+        font-variant-numeric: tabular-nums;
+        text-align: right;
+        white-space: nowrap;
+    }
+
+    .progress-bar {
+        grid-area: progress-bar;
+        width: 100%;
+        /* margin-block-start: 8px; */
+        margin-block-end: 4px;
+    }
+}
+
 .menu-list {
     margin: 0;
     padding: 4px 0;
@@ -297,6 +335,25 @@ body {
 
 .terminal-panel {
     grid-area: terminal;
+
+    .panel-content {
+        position: relative;
+        height: 0;
+        display: grid;
+
+        #terminal {
+            grid-area: 1 / -1;
+        }
+
+        .popover-container {
+            position: absolute;
+            inset-block-start: 0;
+            inset-inline-end: 0;
+            width: 100%;
+            max-width: 400px;
+            padding: 8px;
+        }
+    }
 }
 
 .terminal-panel,
@@ -305,7 +362,6 @@ body {
 }
 
 #terminal {
-    height: 0;
     font-family: monospace;
     font-size: max(13px, min(15px, 2vw));
     overflow: hidden;

src/app.tsx

@@ -1,4 +1,4 @@
-import { createEffect, createSignal, onMount } from 'solid-js';
+import { createEffect, createSignal, onMount, Show } from 'solid-js';
 import { createStore, reconcile } from 'solid-js/store';
 import { render } from 'solid-js/web';
 import debounce from 'lodash/debounce';
@@ -10,6 +10,8 @@ import type { FileTreeNode } from './types';
 import { RPCController } from './rpc';
 import { Terminal } from './terminal';
 
+import { PopoverContainer } from './components/popover-container';
+import { ProgressPopover } from './components/progress-popover';
 import { PanelContainer } from './components/panel';
 import { TreeView } from './components/tree-view';
 
@@ -80,6 +82,21 @@ const App = () => {
         interrupt();
     };
 
+    const [currentlyLoadingTool, setCurrentlyLoadingTool] = createSignal<
+        { command: string; totalLength: number; doneLength: number } | null
+    >(null);
+
+    let hideToolLoadProgressTimeout = 0;
+
+    createEffect(() => {
+        let info;
+        if (info = currentlyLoadingTool()) {
+            clearTimeout(hideToolLoadProgressTimeout);
+            const timeout = info.doneLength === info.totalLength ? 2000 : 10000;
+            hideToolLoadProgressTimeout = setTimeout(() => setCurrentlyLoadingTool(null), timeout);
+        }
+    });
+
     let [creatingNewFileNode, setCreatingNewFileNode] = createSignal<
         Parameters<typeof TreeView<FileTreeNode>>[0]['creatingNewNode']
     >(null);
@@ -270,6 +287,11 @@ const App = () => {
                 updateFileTree(message.tree);
                 break;
             }
+            case 'tool-load-progress': {
+                let { command, totalLength, doneLength } = message;
+                setCurrentlyLoadingTool({ command, totalLength, doneLength });
+                break;
+            }
             default: message satisfies never;
         }
     });
@@ -352,9 +374,26 @@ const App = () => {
                                 },
                             ]);
                         },
-                        children: (
-                            <div ref={el => xtermContainer = el} class="panel-content" id="terminal" />
-                        ),
+                        get children() {
+                            return <div class="panel-content">
+                                <div ref={el => xtermContainer = el} id="terminal" />
+                                <PopoverContainer>
+                                    <Show when={currentlyLoadingTool()}>
+                                        {(info) => {
+                                            const fmt = (n: number) => (n / 1048576).toFixed(1);
+                                            const done = () => info().doneLength === info().totalLength;
+                                            return <ProgressPopover
+                                                label={!done() ? `Loading ${info().command}...` : `Loaded ${info().command}`}
+                                                progressText={(!done() ? `${fmt(info().doneLength)} / ` : '') +
+                                                    `${fmt(info().totalLength)} MiB`}
+                                                progressValue={info().doneLength / info().totalLength}
+                                                done={done()}
+                                            />;
+                                        }}
+                                    </Show>
+                                </PopoverContainer>
+                            </div>;
+                        },
                     },
 
                     {

src/builder.ts

@@ -33,7 +33,8 @@ export class Builder {
     build(
         files: Tree,
         scriptName: string,
-        writeOutput: (bytes: Uint8Array) => void
+        writeOutput: (bytes: Uint8Array) => void,
+        loadProgress: (event: { command: string; totalLength: number; doneLength: number }) => void,
     ): Promise<{ code: number, files: Tree }> {
         if (this.#busy) {
             throw new Error("Builder is busy");
@@ -44,6 +45,9 @@ export class Builder {
                 const message = event.data;
                 if (message.type === 'output') {
                     writeOutput(message.bytes);
+                } else if (message.type === 'loadProgress') {
+                    let { command, totalLength, doneLength } = message;
+                    loadProgress({ command, totalLength, doneLength });
                 } else if (message.type === 'result') {
                     resolve({ code: message.code, files: message.files });
                     this.#busy = false;

src/builder/proto.ts

@@ -5,6 +5,13 @@ export interface PackagesMessage {
     packages: { [name: string]: string }
 }
 
+export interface LoadProgressMessage {
+    type: 'loadProgress';
+    command: string;
+    totalLength: number;
+    doneLength: number;
+}
+
 export interface BuildMessage {
     type: 'build',
     files: Tree,
@@ -32,6 +39,7 @@ export type AppToBuilderMessage =
 
 export type BuilderToAppMessage =
     | PackagesMessage
+    | LoadProgressMessage
     | OutputMessage
     | ResultMessage
     | ErrorMessage;

src/builder/worker.ts

@@ -74,6 +74,9 @@ async function executeScript(
                 stdout: writeBuffered,
                 stderr: writeBuffered,
                 decodeASCII: false,
+                fetchProgress: ({ totalLength, doneLength }) => {
+                    postMessage({ type: 'loadProgress', command: name, totalLength, doneLength });
+                },
             })!;
         } catch (error) {
             if (error instanceof command.Exit) {

src/components/popover-container.tsx

@@ -0,0 +1,57 @@
+import { children, createComputed, createSignal, type JSX } from 'solid-js';
+
+const ANIMATION_ID = 'popover-container-animation';
+
+interface PopoverContainerProps {
+    children: JSX.Element;
+}
+
+export const PopoverContainer = (props: PopoverContainerProps) => {
+    const resolved = children(() => props.children);
+
+    const [rendered, setRendered] = createSignal<JSX.Element>(null);
+
+    function cancelExistingAnimation(element: HTMLElement) {
+        element.getAnimations().find(anim => anim.id === ANIMATION_ID)?.cancel();
+    }
+
+    createComputed((previous) => {
+        const current = resolved();
+
+        if (current !== undefined && current !== null && !(current instanceof HTMLElement)) {
+            throw new Error('Popover container only supports a single popover');
+        }
+
+        if (previous !== undefined && previous !== null && !(previous instanceof HTMLElement)) {
+            throw new Error('Unexpected children type');
+        }
+
+        if (!previous && current) {
+            setRendered(current);
+            cancelExistingAnimation(current);
+            current.animate(
+                { transform: 'translateY(16px)', opacity: 0, offset: 0 },
+                { duration: 150, id: ANIMATION_ID, timeline: document.timeline },
+            );
+        } else if (previous && !current) {
+            cancelExistingAnimation(previous);
+            const animation = previous.animate(
+                { transform: 'translateY(16px)', opacity: 0 },
+                { duration: 150, id: ANIMATION_ID, timeline: document.timeline },
+            );
+            animation.finished.then(() => {
+                if (rendered() === previous) {
+                    setRendered(null);
+                }
+            });
+        }
+
+        return current;
+    }, resolved());
+
+    return (
+        <div class="popover-container">
+            {rendered()}
+        </div>
+    );
+};

src/components/progress-bar.css

@@ -0,0 +1,16 @@
+.progress-bar {
+    block-size: 4px;
+    inline-size: 10em;
+    border-radius: 9999px;
+    background: var(--color-progress-bar-track);
+    overflow: hidden;
+
+    > .filled {
+        block-size: 100%;
+        background: var(--color-progress-bar-indicator);
+    }
+
+    &.success > .filled {
+        background: var(--color-progress-bar-indicator-success);
+    }
+}

src/components/progress-bar.tsx

@@ -0,0 +1,20 @@
+import { cls } from '../helpers/class-names';
+import './progress-bar.css';
+
+interface ProgressBarProps {
+    value: number;
+    style?: 'normal' | 'success';
+}
+
+export const ProgressBar = (props: ProgressBarProps) => {
+    return (
+        <div
+            class={cls('progress-bar', props.style === 'success' && 'success')}
+            role="progressbar"
+            aria-valuenow={props.value}
+            aria-valuemax={1}
+        >
+            <div class="filled" style={{ 'inline-size': `${(props.value * 100).toFixed(2)}%` }} />
+        </div>
+    );
+};

src/components/progress-popover.tsx

@@ -0,0 +1,18 @@
+import { ProgressBar } from './progress-bar';
+
+interface ProgressPopoverProps {
+    label: string;
+    progressText: string;
+    progressValue: number;
+    done: boolean;
+}
+
+export const ProgressPopover = (props: ProgressPopoverProps) => {
+    return (
+        <div class="progress-popover popover">
+            <div class="label">{props.label}</div>
+            <div class="progress-text">{props.progressText}</div>
+            <ProgressBar value={props.progressValue} style={props.done ? 'success' : 'normal'} />
+        </div>
+    );
+};

src/proto.ts

@@ -85,6 +85,13 @@ interface HomeChangeMessage {
     tree: FileTreeNode[];
 }
 
+interface ToolLoadProgressMessage {
+    type: 'tool-load-progress';
+    command: string;
+    totalLength: number;
+    doneLength: number;
+}
+
 export type PageToWorkerMessage =
     | RPCRequestMessage
     | RPCResponseMessage
@@ -104,4 +111,5 @@ export type WorkerToPageMessage =
     | TerminalStateChangeMessage
     | MountStateChangeMessage
     | HomeChangeMessage
+    | ToolLoadProgressMessage
     ;