@runwisp/ui 0.4.0

package/src/lib/log-console/LogCache.svelte.ts

@@ -0,0 +1,93 @@
+// SPDX-FileCopyrightText: PoppyCake, s.r.o.
+// SPDX-License-Identifier: Apache-2.0
+
+import type { LogSlice, LogEvent } from "./types.js";
+import { SvelteMap } from "svelte/reactivity";
+
+/**
+ * LogCache provides high-performance storage and pruning for log data.
+ *
+ * To handle up to 1 million lines without crashing the browser's memory,
+ * the cache must aggressively prune data that is far from the current viewport.
+ * It uses a SvelteMap for reactive, efficient line lookups and updates.
+ */
+export class LogCache {
+    lines = $state(new SvelteMap<number, string>());
+    totalLines = $state(0);
+    totalBytes = $state(0);
+    finished = $state(false);
+    firstAvailableLine = $state(0);
+
+    get size() {
+        return this.lines.size;
+    }
+
+    readonly MAX_CACHE_SIZE = 50_000;
+    readonly PRUNE_THRESHOLD = 60_000;
+
+    mergeSlice(slice: LogSlice) {
+        let min = Number.POSITIVE_INFINITY;
+        let max = Number.NEGATIVE_INFINITY;
+        let touched = false;
+
+        for (const [k, v] of Object.entries(slice)) {
+            const line = Number(k);
+            if (!Number.isFinite(line) || line < 0) continue;
+            min = Math.min(min, line);
+            max = Math.max(max, line);
+            const prev = this.lines.get(line);
+            if (prev !== v) {
+                this.lines.set(line, v);
+                touched = true;
+            }
+        }
+
+        return { touched, min, max };
+    }
+
+    applyEvent(event: LogEvent) {
+        this.totalLines = Math.max(this.totalLines, Math.floor(event.sizeLines));
+        this.totalBytes = Math.max(this.totalBytes, Math.floor(event.sizeBytes ?? 0));
+        this.finished = event.finished;
+        if (event.firstAvailableLine !== undefined && event.firstAvailableLine > 0) {
+            this.firstAvailableLine = Math.max(this.firstAvailableLine, event.firstAvailableLine);
+        }
+
+        return this.mergeSlice(event.lines);
+    }
+
+    prune(visibleStart: number, visibleEnd: number) {
+        if (this.lines.size < this.MAX_CACHE_SIZE) return;
+
+        const center = (visibleStart + visibleEnd) / 2;
+        const chunk = this.MAX_CACHE_SIZE / 2;
+        const low = center - chunk;
+        const high = center + chunk;
+
+        for (const key of this.lines.keys()) {
+            if (key < low || key > high) {
+                this.lines.delete(key);
+            }
+        }
+    }
+
+    reset() {
+        this.lines.clear();
+        this.totalLines = 0;
+        this.totalBytes = 0;
+        this.finished = false;
+        this.firstAvailableLine = 0;
+    }
+
+    isRangeComplete(start: number, end: number) {
+        const max = Math.max(0, this.totalLines - 1);
+        const min = this.firstAvailableLine;
+        const s = Math.max(min, Math.min(max, start));
+        const e = Math.max(s, Math.min(max, end));
+
+        for (let line = s; line <= e; line++) {
+            if (!this.lines.has(line)) return false;
+        }
+        return true;
+    }
+}

package/src/lib/log-console/LogFetcher.svelte.ts

@@ -0,0 +1,179 @@
+// SPDX-FileCopyrightText: PoppyCake, s.r.o.
+// SPDX-License-Identifier: Apache-2.0
+
+import { createLoggerFactory } from "@runwisp/common";
+import { SvelteSet } from "svelte/reactivity";
+import type { LogCache } from "./LogCache.svelte.js";
+import type { FetchLogsFn } from "./types.js";
+import { isLogEvent } from "./types.js";
+
+const createLogger = createLoggerFactory();
+const logger = createLogger("LogFetcher");
+
+/**
+ * LogFetcher manages on-demand data loading for the LogConsole.
+ *
+ * It uses a chunk-based state machine to manage requests:
+ * - Maps lines to chunk indexes to naturally deduplicate overlapping ranges.
+ * - Schedules fetches using pending/in-flight chunk Sets.
+ * - Throttles and prioritizes requests to prevent viewport jitter.
+ */
+export class LogFetcher {
+    private cache: LogCache;
+    private fetchLogsFn: FetchLogsFn | undefined;
+    private chunkSize: number;
+
+    readonly MAX_INFLIGHT = 2;
+    readonly MIN_REQUEST_INTERVAL_MS = 140;
+
+    isFetching = $state(false);
+
+    private pendingChunks = new SvelteSet<number>();
+    private inFlightChunks = new SvelteSet<number>();
+    private fetchTimer: ReturnType<typeof setTimeout> | null = null;
+    private lastRequestAt = 0;
+
+    private onDataLoaded?: ((min: number, max: number) => void) | undefined;
+
+    constructor(
+        cache: LogCache,
+        fetchLogsFn: FetchLogsFn | undefined,
+        chunkSize: number = 4096,
+        onDataLoaded?: (min: number, max: number) => void,
+    ) {
+        this.cache = cache;
+        this.fetchLogsFn = fetchLogsFn;
+        this.chunkSize = Math.max(1, Math.floor(chunkSize));
+        this.onDataLoaded = onDataLoaded;
+    }
+
+    setFetchLogsFn(fn: FetchLogsFn | undefined) {
+        this.fetchLogsFn = fn;
+    }
+
+    setChunkSize(size: number) {
+        this.chunkSize = Math.max(1, Math.floor(size));
+    }
+
+    enqueue(from: number, to: number) {
+        if (!this.fetchLogsFn) return;
+
+        const limit = this.cache.totalLines > 0 ? this.cache.totalLines : this.chunkSize;
+        const minLine = this.cache.firstAvailableLine;
+        const maxLine = limit - 1;
+
+        const clampedFrom = Math.max(from, minLine);
+        const clampedTo = Math.min(to, Math.max(clampedFrom, maxLine));
+
+        const startChunk = Math.floor(clampedFrom / this.chunkSize);
+        const endChunk = Math.floor(clampedTo / this.chunkSize);
+
+        let queuedAny = false;
+        for (let i = startChunk; i <= endChunk; i++) {
+            if (this.inFlightChunks.has(i) || this.pendingChunks.has(i)) continue;
+
+            const chunkFrom = i * this.chunkSize;
+            const chunkTo = Math.min((i + 1) * this.chunkSize - 1, maxLine);
+            if (this.cache.isRangeComplete(chunkFrom, chunkTo)) continue;
+
+            this.pendingChunks.add(i);
+            queuedAny = true;
+        }
+
+        if (queuedAny) {
+            this.scheduleFetch();
+        }
+    }
+
+    maybeRequestMissing(visibleStart: number, visibleEnd: number, maxChunks = 12) {
+        if (!this.fetchLogsFn || this.cache.totalLines <= 0 || visibleEnd < visibleStart) return;
+
+        const startChunk = Math.floor(visibleStart / this.chunkSize);
+        const endChunk = Math.floor(visibleEnd / this.chunkSize);
+
+        let scanned = 0;
+        for (let i = startChunk; i <= endChunk; i++) {
+            if (scanned++ >= maxChunks) break;
+
+            const chunkFrom = i * this.chunkSize;
+            const chunkTo = Math.min((i + 1) * this.chunkSize - 1, this.cache.totalLines - 1);
+            if (this.cache.isRangeComplete(chunkFrom, chunkTo)) continue;
+
+            this.enqueue(chunkFrom, chunkTo);
+        }
+    }
+
+    private scheduleFetch() {
+        if (!this.fetchLogsFn || this.fetchTimer || this.pendingChunks.size === 0) return;
+
+        const now = Date.now();
+        const wait = Math.max(0, this.MIN_REQUEST_INTERVAL_MS - (now - this.lastRequestAt));
+        this.fetchTimer = setTimeout(() => {
+            this.fetchTimer = null;
+            void this.runFetchPump();
+        }, wait);
+    }
+
+    pruneQueue(renderedStart: number, renderedEnd: number) {
+        const centerLine = (renderedStart + renderedEnd) / 2;
+        const centerChunk = Math.floor(centerLine / this.chunkSize);
+        const radius = 2;
+
+        for (const chunk of this.pendingChunks) {
+            if (Math.abs(chunk - centerChunk) > radius) {
+                this.pendingChunks.delete(chunk);
+            }
+        }
+    }
+
+    private async runFetchPump() {
+        if (!this.fetchLogsFn || this.pendingChunks.size === 0) return;
+
+        if (this.inFlightChunks.size >= this.MAX_INFLIGHT) {
+            this.scheduleFetch();
+            return;
+        }
+
+        // Just pick the first pending chunk (pruneQueue guarantees relevance)
+        const nextChunk = this.pendingChunks.values().next().value;
+        if (nextChunk === undefined) return;
+
+        this.pendingChunks.delete(nextChunk);
+        this.inFlightChunks.add(nextChunk);
+
+        this.lastRequestAt = Date.now();
+        this.isFetching = true;
+
+        const limit = this.cache.totalLines > 0 ? this.cache.totalLines : this.chunkSize;
+        const maxLine = limit - 1;
+        const chunkFrom = nextChunk * this.chunkSize;
+        const chunkTo = Math.min((nextChunk + 1) * this.chunkSize - 1, maxLine);
+
+        try {
+            const res = await this.fetchLogsFn(chunkFrom, chunkTo);
+            if (res) {
+                const merged = isLogEvent(res)
+                    ? this.cache.applyEvent(res)
+                    : this.cache.mergeSlice(res);
+
+                if (merged.touched && this.onDataLoaded) {
+                    this.onDataLoaded(merged.min, merged.max);
+                }
+            }
+        } catch (e) {
+            logger.error(`Failed to fetch chunk ${String(nextChunk)}`, e);
+        } finally {
+            this.inFlightChunks.delete(nextChunk);
+            this.isFetching = this.inFlightChunks.size > 0;
+            this.scheduleFetch();
+        }
+    }
+
+    destroy() {
+        if (this.fetchTimer) clearTimeout(this.fetchTimer);
+        this.fetchTimer = null;
+        this.pendingChunks.clear();
+        this.inFlightChunks.clear();
+        this.isFetching = false;
+    }
+}

package/src/lib/log-console/types.ts

@@ -0,0 +1,24 @@
+// SPDX-FileCopyrightText: PoppyCake, s.r.o.
+// SPDX-License-Identifier: Apache-2.0
+
+export type LineNumber = number;
+export type LogMessage = string;
+
+export type LogSlice = Record<LineNumber, LogMessage>;
+
+export type LogEvent = {
+    lines: LogSlice;
+    sizeLines: number;
+    sizeBytes?: number;
+    finished: boolean;
+    firstAvailableLine?: number;
+};
+
+export function isLogEvent(value: unknown): value is LogEvent {
+    return value !== null && typeof value === "object" && "sizeLines" in value;
+}
+
+export type FetchLogsFn = (
+    from: number,
+    to: number,
+) => Promise<LogSlice | LogEvent | undefined> | LogSlice | LogEvent | undefined;

package/src/lib/theme-tokens.css

@@ -0,0 +1,235 @@
+/* SPDX-FileCopyrightText: PoppyCake, s.r.o. */
+/* SPDX-License-Identifier: Apache-2.0 */
+
+/* RunWisp Design Tokens — plain CSS, no Tailwind directives.
+ *
+ * Single source of truth for the OKLch palette and the semantic `--rw-*`
+ * tokens that drive all apps:
+ *   - apps/ui  (SvelteKit dashboard): imported transitively via theme.css.
+ *   - apps/docs (Astro + Starlight):  imported directly through Starlight's
+ *                                     customCss (no Tailwind pipeline).
+ *
+ * The raw palette is exposed under the --rw-color-* namespace; theme.css
+ * republishes those names under the --color-* namespace via Tailwind's
+ * @theme so utilities like `bg-wisp-500` work in the Svelte/Astro apps.
+ *
+ * Dark-mode contract:
+ *   - apps/ui toggles the `.dark` class on <html>.
+ *   - Starlight (apps/docs) writes data-theme="dark" on the documentElement.
+ *   The union selector covers both. Light mode is the default.
+ */
+
+:root {
+    /* Primary — Wisp Violet */
+    --rw-color-wisp-50: oklch(0.97 0.02 280);
+    --rw-color-wisp-100: oklch(0.94 0.04 280);
+    --rw-color-wisp-200: oklch(0.88 0.08 280);
+    --rw-color-wisp-300: oklch(0.78 0.12 280);
+    --rw-color-wisp-400: oklch(0.68 0.16 275);
+    --rw-color-wisp-500: oklch(0.58 0.18 270);
+    --rw-color-wisp-600: oklch(0.5 0.18 268);
+    --rw-color-wisp-700: oklch(0.42 0.16 268);
+    --rw-color-wisp-800: oklch(0.35 0.12 268);
+    --rw-color-wisp-900: oklch(0.28 0.08 268);
+    --rw-color-wisp-950: oklch(0.18 0.06 268);
+
+    /* Accent — Aurora Teal */
+    --rw-color-aurora-50: oklch(0.97 0.02 180);
+    --rw-color-aurora-100: oklch(0.94 0.05 180);
+    --rw-color-aurora-200: oklch(0.88 0.1 178);
+    --rw-color-aurora-300: oklch(0.78 0.14 176);
+    --rw-color-aurora-400: oklch(0.68 0.16 174);
+    --rw-color-aurora-500: oklch(0.58 0.14 172);
+    --rw-color-aurora-600: oklch(0.5 0.12 172);
+    --rw-color-aurora-700: oklch(0.42 0.1 172);
+    --rw-color-aurora-800: oklch(0.35 0.08 172);
+    --rw-color-aurora-900: oklch(0.28 0.06 172);
+
+    /* Mist — neutral grays with a purple tint */
+    --rw-color-mist-50: oklch(0.98 0.005 280);
+    --rw-color-mist-100: oklch(0.96 0.008 280);
+    --rw-color-mist-200: oklch(0.92 0.01 280);
+    --rw-color-mist-300: oklch(0.86 0.012 280);
+    --rw-color-mist-400: oklch(0.7 0.012 280);
+    --rw-color-mist-500: oklch(0.55 0.012 280);
+    --rw-color-mist-600: oklch(0.45 0.012 280);
+    --rw-color-mist-700: oklch(0.35 0.012 280);
+    --rw-color-mist-800: oklch(0.25 0.012 280);
+    --rw-color-mist-900: oklch(0.18 0.012 280);
+    --rw-color-mist-950: oklch(0.12 0.012 280);
+
+    /* Success — Aurora Mint */
+    --rw-color-success-50: oklch(0.97 0.018 165);
+    --rw-color-success-100: oklch(0.94 0.035 165);
+    --rw-color-success-200: oklch(0.88 0.06 165);
+    --rw-color-success-300: oklch(0.78 0.09 165);
+    --rw-color-success-400: oklch(0.68 0.11 165);
+    --rw-color-success-500: oklch(0.58 0.115 165);
+    --rw-color-success-600: oklch(0.5 0.105 165);
+    --rw-color-success-700: oklch(0.42 0.095 165);
+
+    /* Danger — Rose Crimson */
+    --rw-color-danger-50: oklch(0.97 0.014 355);
+    --rw-color-danger-100: oklch(0.94 0.028 355);
+    --rw-color-danger-200: oklch(0.88 0.052 355);
+    --rw-color-danger-300: oklch(0.78 0.085 355);
+    --rw-color-danger-400: oklch(0.68 0.115 355);
+    --rw-color-danger-500: oklch(0.58 0.145 355);
+    --rw-color-danger-600: oklch(0.5 0.135 355);
+    --rw-color-danger-700: oklch(0.42 0.12 355);
+
+    /* Warning */
+    --rw-color-warning-50: oklch(0.98 0.03 85);
+    --rw-color-warning-100: oklch(0.95 0.08 85);
+    --rw-color-warning-200: oklch(0.9 0.12 80);
+    --rw-color-warning-300: oklch(0.85 0.16 75);
+    --rw-color-warning-400: oklch(0.8 0.18 70);
+    --rw-color-warning-500: oklch(0.75 0.16 65);
+    --rw-color-warning-600: oklch(0.65 0.14 60);
+    --rw-color-warning-700: oklch(0.55 0.12 55);
+}
+
+/* Light-mode semantic tokens (default) */
+:root {
+    /* Surfaces */
+    --rw-surface: var(--rw-color-mist-50);
+    --rw-surface-raised: white;
+    --rw-surface-overlay: white;
+    --rw-surface-sunken: var(--rw-color-mist-100);
+    /* On-surface text */
+    --rw-on-surface: var(--rw-color-mist-900);
+    --rw-on-surface-muted: var(--rw-color-mist-600);
+    --rw-on-surface-faint: var(--rw-color-mist-400);
+    /* Borders / outlines */
+    --rw-outline: var(--rw-color-mist-200);
+    --rw-outline-hover: var(--rw-color-mist-300);
+    --rw-outline-faint: var(--rw-color-mist-100);
+    --rw-ring: var(--rw-color-wisp-500);
+    --rw-backdrop: oklch(0.12 0.012 280 / 0.5);
+    /* Primary */
+    --rw-primary: var(--rw-color-wisp-600);
+    --rw-primary-hover: var(--rw-color-wisp-700);
+    --rw-primary-active: var(--rw-color-wisp-800);
+    --rw-on-primary: white;
+    --rw-primary-soft: var(--rw-color-wisp-100);
+    --rw-primary-soft-text: var(--rw-color-wisp-700);
+    /* Danger */
+    --rw-danger: var(--rw-color-danger-600);
+    --rw-danger-hover: var(--rw-color-danger-700);
+    --rw-danger-active: var(--rw-color-danger-800);
+    --rw-on-danger: white;
+    --rw-danger-soft: var(--rw-color-danger-50);
+    --rw-danger-soft-text: var(--rw-color-danger-700);
+    /* Success */
+    --rw-success: var(--rw-color-success-600);
+    --rw-success-hover: var(--rw-color-success-700);
+    --rw-on-success: white;
+    --rw-success-soft: var(--rw-color-success-50);
+    --rw-success-soft-text: var(--rw-color-success-700);
+    /* Warning */
+    --rw-warning: var(--rw-color-warning-500);
+    --rw-warning-hover: var(--rw-color-warning-600);
+    --rw-on-warning: white;
+    --rw-warning-soft: var(--rw-color-warning-50);
+    --rw-warning-soft-text: var(--rw-color-warning-700);
+    /* Info */
+    --rw-info: var(--rw-color-aurora-600);
+    --rw-info-hover: var(--rw-color-aurora-700);
+    --rw-on-info: white;
+    --rw-info-soft: var(--rw-color-aurora-50);
+    --rw-info-soft-text: var(--rw-color-aurora-700);
+    /* Glass */
+    --rw-glass: oklch(1 0 0 / 0.8);
+    --rw-glass-blur: blur(12px);
+}
+
+/* Dark-mode semantic tokens — `.dark` class for Svelte apps, `[data-theme="dark"]`
+ * attribute for Starlight. Both selectors apply the same token set. */
+:root.dark,
+:root[data-theme="dark"] {
+    --rw-surface: var(--rw-color-mist-950);
+    --rw-surface-raised: var(--rw-color-mist-900);
+    --rw-surface-overlay: var(--rw-color-mist-900);
+    --rw-surface-sunken: oklch(0.08 0.012 280);
+    --rw-on-surface: var(--rw-color-mist-100);
+    --rw-on-surface-muted: var(--rw-color-mist-400);
+    --rw-on-surface-faint: var(--rw-color-mist-600);
+    --rw-outline: var(--rw-color-mist-800);
+    --rw-outline-hover: var(--rw-color-mist-700);
+    --rw-outline-faint: var(--rw-color-mist-800);
+    --rw-ring: var(--rw-color-wisp-400);
+    --rw-backdrop: oklch(0 0 0 / 0.7);
+    /* Primary */
+    --rw-primary: var(--rw-color-wisp-500);
+    --rw-primary-hover: var(--rw-color-wisp-400);
+    --rw-primary-active: var(--rw-color-wisp-300);
+    --rw-on-primary: white;
+    --rw-primary-soft: oklch(0.22 0.06 270);
+    --rw-primary-soft-text: var(--rw-color-wisp-300);
+    /* Danger */
+    --rw-danger: var(--rw-color-danger-500);
+    --rw-danger-hover: var(--rw-color-danger-400);
+    --rw-danger-active: var(--rw-color-danger-300);
+    --rw-on-danger: white;
+    --rw-danger-soft: oklch(0.2 0.04 355);
+    --rw-danger-soft-text: var(--rw-color-danger-300);
+    /* Success */
+    --rw-success: var(--rw-color-success-500);
+    --rw-success-hover: var(--rw-color-success-400);
+    --rw-on-success: white;
+    --rw-success-soft: oklch(0.2 0.04 165);
+    --rw-success-soft-text: var(--rw-color-success-300);
+    /* Warning */
+    --rw-warning: var(--rw-color-warning-400);
+    --rw-warning-hover: var(--rw-color-warning-300);
+    --rw-on-warning: var(--rw-color-mist-950);
+    --rw-warning-soft: oklch(0.2 0.04 85);
+    --rw-warning-soft-text: var(--rw-color-warning-300);
+    /* Info */
+    --rw-info: var(--rw-color-aurora-500);
+    --rw-info-hover: var(--rw-color-aurora-400);
+    --rw-on-info: white;
+    --rw-info-soft: oklch(0.2 0.04 180);
+    --rw-info-soft-text: var(--rw-color-aurora-300);
+    /* Glass */
+    --rw-glass: oklch(0.12 0.012 280 / 0.9);
+}
+
+/* Platform polish — focus ring, text selection, scrollbar. Lifted from
+ * theme.css so apps/docs (no Tailwind) gets the same treatment as the
+ * Svelte apps. */
+
+:focus-visible {
+    outline: 2px solid var(--rw-ring);
+    outline-offset: 2px;
+}
+
+::selection {
+    background-color: var(--rw-color-wisp-200);
+    color: var(--rw-color-wisp-900);
+}
+
+:root.dark ::selection,
+:root[data-theme="dark"] ::selection {
+    background-color: var(--rw-color-wisp-800);
+    color: var(--rw-color-wisp-100);
+}
+
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: var(--rw-surface-sunken);
+    border-radius: 9999px;
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--rw-outline-hover);
+    border-radius: 9999px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: var(--rw-on-surface-faint);
+}