tmux-ide 2.8.0 → 2.9.0-beta.14

package/packages/daemon/dist/tui/mirror/panel-host-reactive.js

@@ -0,0 +1,13 @@
+import { createEffect, untrack } from "solid-js";
+/**
+ * Track only the project-directory accessor, not the signals read while the
+ * loader flushes and hydrates panel state. Without the untracked boundary a
+ * loader can subscribe its own effect to the state it writes and recurse until
+ * Solid exhausts the stack.
+ */
+export function trackPanelHostDirectory(directory, load) {
+    createEffect(() => {
+        const nextDirectory = directory();
+        untrack(() => load(nextDirectory));
+    });
+}

package/packages/daemon/dist/tui/mirror/panel-host.js

@@ -0,0 +1,242 @@
+import stringWidth from "string-width";
+import { compositeContainsPanel, findCompositePanelLeaf, firstCompositePanelKind, } from "./composite-layout.js";
+export const PANEL_TITLES = {
+    home: "Home",
+    terminals: "Terminals",
+    files: "Files",
+    diff: "Diff",
+    missions: "Missions",
+};
+export const PANEL_GLYPHS = {
+    home: "⌂",
+    terminals: "❯",
+    files: "▤",
+    diff: "±",
+    missions: "◆",
+};
+export const CANONICAL_PANEL_VIEWS = [
+    { id: "home", title: "Home", panel: "home" },
+    { id: "terminals", title: "Terminals", panel: "terminals" },
+];
+export const HOSTED_VIEW_SHORTCUT_KEYS = [
+    "f1",
+    "f2",
+    "f3",
+    "f4",
+    "f6",
+    "f7",
+    "f8",
+    "f9",
+    "f10",
+    "f11",
+    "f12",
+    "f13",
+];
+export function panelCell(view) {
+    return ` ${view.glyph} ${view.title} `;
+}
+export function terminalDisplayWidth(text) {
+    return stringWidth(text);
+}
+export function panelSpans(views) {
+    const out = [];
+    let x = 0;
+    for (const view of views) {
+        const width = terminalDisplayWidth(panelCell(view));
+        out.push({ start: x, width });
+        x += width;
+    }
+    return out;
+}
+export function buildHostedPanelViews(configuredViews) {
+    const source = configuredViews && configuredViews.length > 0 ? configuredViews : CANONICAL_PANEL_VIEWS;
+    return source.map((view, index) => {
+        if (isCompositeView(view)) {
+            const panel = firstCompositePanelKind(view.layout);
+            return {
+                id: view.id,
+                title: view.title ?? "Workspace",
+                panel,
+                layout: view.layout,
+                glyph: "◫",
+                order: index,
+                shortcut: shortcutForHostedViewIndex(index),
+            };
+        }
+        const panel = view.panel;
+        return {
+            id: view.id,
+            title: view.title ?? PANEL_TITLES[panel],
+            panel,
+            layout: null,
+            glyph: PANEL_GLYPHS[panel],
+            order: index,
+            shortcut: shortcutForHostedViewIndex(index),
+        };
+    });
+}
+function isCompositeView(view) {
+    return "layout" in view;
+}
+export function shortcutForHostedViewIndex(index) {
+    const key = HOSTED_VIEW_SHORTCUT_KEYS[index];
+    if (!key)
+        return null;
+    return { key, label: key.toUpperCase() };
+}
+export function viewsFromWorkspaceConfig(config) {
+    return buildHostedPanelViews(config?.app?.views);
+}
+export function viewsFromResolvedConfig(resolved) {
+    return viewsFromWorkspaceConfig(resolved?.workspace);
+}
+export function findHostedViewById(views, id) {
+    if (!id)
+        return null;
+    return views.find((view) => view.id === id) ?? null;
+}
+export function findFirstHostedViewForPanel(views, panel) {
+    if (!panel)
+        return null;
+    return (views.find((view) => view.layout ? compositeContainsPanel(view.layout, panel) : view.panel === panel) ?? null);
+}
+export function preferredLeafForPanel(view, panel) {
+    return view.layout
+        ? findCompositePanelLeaf(view.layout, panel)
+        : view.panel === panel
+            ? view.id
+            : null;
+}
+export function reconcileHostedSelection(views, previous) {
+    return (findHostedViewById(views, previous.id) ??
+        findFirstHostedViewForPanel(views, previous.panel) ??
+        views[0] ??
+        null);
+}
+export function initialHostedSelection(views, requestedPanel, persistedPanel) {
+    return (findFirstHostedViewForPanel(views, requestedPanel) ??
+        findFirstHostedViewForPanel(views, persistedPanel) ??
+        views[0] ??
+        null);
+}
+export function navigateHostedPanel(views, currentViewId, panel) {
+    const current = findHostedViewById(views, currentViewId) ?? views[0] ?? null;
+    const next = findFirstHostedViewForPanel(views, panel);
+    if (next) {
+        return {
+            activeViewId: next.id,
+            view: next,
+            changed: next.id !== currentViewId,
+            note: null,
+        };
+    }
+    const fallback = current ?? buildHostedPanelViews(null)[0];
+    return {
+        activeViewId: fallback.id,
+        view: fallback,
+        changed: false,
+        note: `No configured ${PANEL_TITLES[panel]} view`,
+    };
+}
+export function hostedActivationEffects(panel, state) {
+    if (panel === "files")
+        return [state.filesLoaded ? "catch-up-files" : "load-files"];
+    if (panel === "diff" && !state.diffLoaded)
+        return ["enter-diff"];
+    return [];
+}
+export function planHostedViewActivation(views, viewId, state) {
+    const view = findHostedViewById(views, viewId);
+    if (!view) {
+        return {
+            activeViewId: null,
+            view: null,
+            effects: [],
+            note: "that view is no longer configured",
+        };
+    }
+    return {
+        activeViewId: view.id,
+        view,
+        effects: hostedActivationEffects(view.panel, state),
+        note: null,
+    };
+}
+export function planHostedReconciledActivation(views, previous, state) {
+    const view = reconcileHostedSelection(views, previous);
+    if (!view) {
+        return {
+            activeViewId: null,
+            view: null,
+            effects: [],
+            note: "no configured views",
+        };
+    }
+    return {
+        activeViewId: view.id,
+        view,
+        effects: previous.panel === view.panel ? [] : hostedActivationEffects(view.panel, state),
+        note: null,
+    };
+}
+export function planHostedInitialActivation(views, requestedPanel, persistedPanel, state, previousPanel) {
+    const view = initialHostedSelection(views, requestedPanel, persistedPanel);
+    if (!view) {
+        return {
+            activeViewId: null,
+            view: null,
+            effects: [],
+            note: "no configured views",
+        };
+    }
+    return {
+        activeViewId: view.id,
+        view,
+        effects: previousPanel === view.panel ? [] : hostedActivationEffects(view.panel, state),
+        note: null,
+    };
+}
+export function panelKindFromLegacyTab(tab) {
+    switch (tab) {
+        case "home":
+            return "home";
+        case "terminal":
+            return "terminals";
+        case "files":
+            return "files";
+        case "diff":
+            return "diff";
+        default:
+            return null;
+    }
+}
+export function legacyTabFromPanelKind(panel) {
+    return panel === "terminals" ? "terminal" : panel === "missions" ? "home" : panel;
+}
+export function panelMode(panel) {
+    switch (panel) {
+        case "terminals":
+            return "mirror";
+        case "files":
+            return "editor";
+        case "diff":
+            return "diff";
+        case "missions":
+            return "missions";
+        case "home":
+            return "home";
+    }
+}
+export function isHostedPanelInert(panel) {
+    return panel === "missions";
+}
+export class PanelHostLoadGeneration {
+    #current = 0;
+    next() {
+        this.#current += 1;
+        return this.#current;
+    }
+    isCurrent(generation) {
+        return generation === this.#current;
+    }
+}

package/packages/daemon/dist/tui/mirror/perf-tap.js

@@ -0,0 +1,32 @@
+/** Pure reporting helpers retained for benchmark result processing. */
+/** A percentile of an ASCENDING-sorted array, linearly interpolated. Empty → 0. */
+export function percentile(sortedAsc, p) {
+    const n = sortedAsc.length;
+    if (n === 0)
+        return 0;
+    if (n === 1)
+        return sortedAsc[0];
+    const rank = (Math.max(0, Math.min(100, p)) / 100) * (n - 1);
+    const lo = Math.floor(rank);
+    const hi = Math.ceil(rank);
+    if (lo === hi)
+        return sortedAsc[lo];
+    const frac = rank - lo;
+    return sortedAsc[lo] * (1 - frac) + sortedAsc[hi] * frac;
+}
+/** Distribution summary of `values` (order-independent — sorts a copy). */
+export function summarize(values) {
+    const n = values.length;
+    if (n === 0)
+        return { count: 0, p50: 0, p95: 0, min: 0, max: 0, mean: 0 };
+    const sorted = [...values].sort((a, b) => a - b);
+    const sum = sorted.reduce((acc, v) => acc + v, 0);
+    return {
+        count: n,
+        p50: percentile(sorted, 50),
+        p95: percentile(sorted, 95),
+        min: sorted[0],
+        max: sorted[n - 1],
+        mean: sum / n,
+    };
+}

package/packages/daemon/dist/tui/mirror/performance-events.js

@@ -0,0 +1,46 @@
+export function detailedWindowFrame(sink, observe) {
+    return sink.detailedWindowPresentationFrames === true ? observe() : null;
+}
+export function emitTuiTerminalCanonicalHostFrameFailOpen(sink, event) {
+    if (!sink)
+        return;
+    try {
+        sink(event);
+    }
+    catch {
+        // Opt-in diagnostics never own renderer frame publication.
+    }
+}
+export function emitTuiTerminalFrameFenceFailOpen(sink, event) {
+    if (!sink)
+        return;
+    try {
+        sink(event);
+    }
+    catch {
+        // Opt-in diagnostics never own renderer frame publication.
+    }
+}
+// The production TUI is assembled through lazy bundle boundaries. Bun may
+// materialize this tiny module more than once across those chunks, so
+// module-local state can split producers from the installed observer. A global
+// symbol preserves one process-local registry without allocating on hot reads.
+const PERFORMANCE_SINK_SLOT = Symbol.for("tmux-ide.tui.performance-event-sink");
+const performanceSinkGlobal = globalThis;
+export function currentTuiPerformanceEventSink() {
+    return performanceSinkGlobal[PERFORMANCE_SINK_SLOT] ?? null;
+}
+export function installTuiPerformanceEventSink(sink) {
+    const activeSink = performanceSinkGlobal[PERFORMANCE_SINK_SLOT];
+    if (activeSink && activeSink !== sink)
+        throw new Error("An OpenTUI performance observer is already active");
+    performanceSinkGlobal[PERFORMANCE_SINK_SLOT] = sink;
+    let installed = true;
+    return () => {
+        if (!installed)
+            return;
+        installed = false;
+        if (performanceSinkGlobal[PERFORMANCE_SINK_SLOT] === sink)
+            performanceSinkGlobal[PERFORMANCE_SINK_SLOT] = null;
+    };
+}

package/packages/daemon/dist/tui/mirror/recipe-components.jsx

@@ -0,0 +1,135 @@
+import { For, Show } from "solid-js";
+import { actionChipGeometry, actionChipText, iconButtonText, iconButtonWidth, recipePalette, rowParts, scrollbarGlyphs, } from "./recipes.js";
+import { clipTerminal } from "./terminal-text.js";
+import { terminalDisplayWidth } from "./panel-host.js";
+const openTuiBorderStyle = (style) => style === "bold" ? "heavy" : style;
+export function Surface(props) {
+    const palette = () => recipePalette(props.theme, { focused: props.focused, attention: props.attention });
+    return (<box width={props.width} height={props.height} border borderColor={palette().border} borderStyle={openTuiBorderStyle(props.focused ? props.theme.borders.focusedStyle : props.theme.borders.style)} backgroundColor={props.theme.colors.background} flexDirection="column" overflow="hidden">
+      <Show when={props.title}>
+        {(title) => <SectionHeader theme={props.theme} title={title()} focused={props.focused}/>}
+      </Show>
+      {props.children}
+    </box>);
+}
+export function SectionHeader(props) {
+    const palette = () => recipePalette(props.theme, { focused: props.focused });
+    const body = () => {
+        const detail = props.detail ? ` · ${props.detail}` : "";
+        return clipTerminal(` ${props.title}${detail}`, Math.max(0, (props.width ?? 200) - 3));
+    };
+    return (<box height={1} backgroundColor={palette().background} overflow="hidden" flexDirection="row">
+      <text fg={palette().accent}>{` ${palette().marker}`}</text>
+      <text fg={palette().foreground}>{body()}</text>
+    </box>);
+}
+export function SelectableRow(props) {
+    const palette = () => recipePalette(props.theme, props, props.tone);
+    const parts = () => rowParts(palette().marker, props.label, props.meta ?? "", props.width);
+    return (<box height={1} backgroundColor={palette().background} overflow="hidden" flexDirection="row">
+      <text fg={palette().accent}>{parts().marker}</text>
+      <text fg={palette().foreground}>{parts().body}</text>
+    </box>);
+}
+export function Button(props) {
+    const palette = () => recipePalette(props.theme, props, props.tone ?? "accent");
+    const marker = () => (props.loading ? "…" : palette().marker);
+    const geometry = () => actionChipGeometry(props.label, props.width);
+    const body = () => actionChipText(props.label, props.width);
+    return (<box height={1} width={geometry().width} backgroundColor={palette().background} overflow="hidden" flexDirection="row">
+      <text fg={palette().accent}>{` ${marker()}`}</text>
+      <text fg={palette().foreground}>{body()}</text>
+    </box>);
+}
+export const ActionChip = Button;
+/** Presentation-only icon control; the owning surface keeps all input policy. */
+export function IconButton(props) {
+    const palette = () => recipePalette(props.theme, props, props.tone ?? "accent");
+    const content = () => iconButtonText(props.hidden ? " " : props.icon, props.width);
+    const paintsState = () => !props.hidden && palette().state !== "base";
+    return (<box height={1} width={iconButtonWidth(props.width)} backgroundColor={paintsState() ? palette().background : undefined} overflow="hidden">
+      <text fg={palette().state === "base" ? props.theme.colors.mutedForeground : palette().foreground}>
+        {content()}
+      </text>
+    </box>);
+}
+export function Badge(props) {
+    const state = () => {
+        if (props.state)
+            return props.state;
+        if (props.tone && props.tone !== "neutral" && props.tone !== "accent") {
+            return { status: props.tone };
+        }
+        return {};
+    };
+    const palette = () => recipePalette(props.theme, state(), props.tone);
+    const label = () => ` ${clipTerminal(props.label, Math.max(0, (props.width ?? props.label.length + 2) - 2))} `;
+    return (<box height={1} width={props.width} backgroundColor={palette().accent} overflow="hidden">
+      <text fg={props.theme.colors.selectionForeground}>{label()}</text>
+    </box>);
+}
+export const StatusChip = Badge;
+export function SegmentedControl(props) {
+    return (<box height={1} width={props.width} flexDirection="row" overflow="hidden">
+      <For each={props.items}>
+        {(item) => {
+            const palette = () => recipePalette(props.theme, {
+                selected: item.id === props.activeId,
+                focused: item.id === props.focusedId,
+                disabled: item.disabled,
+            });
+            const label = () => ` ${clipTerminal(item.label, 10)} `;
+            return (<box height={1} backgroundColor={palette().background}>
+              <text fg={palette().foreground}>{label()}</text>
+            </box>);
+        }}
+      </For>
+    </box>);
+}
+export const Tabs = SegmentedControl;
+export function InputShell(props) {
+    const palette = () => recipePalette(props.theme, { focused: props.focused, disabled: props.disabled });
+    const value = () => props.value || props.placeholder || "";
+    const content = () => {
+        const cursor = props.focused && !props.disabled ? "▏" : "";
+        const width = Math.max(0, props.width - 4);
+        const clipped = clipTerminal(`${value()}${cursor}`, width);
+        return `${clipped}${" ".repeat(Math.max(0, width - terminalDisplayWidth(clipped)))}`;
+    };
+    return (<box height={1} width={props.width} backgroundColor={palette().background} overflow="hidden" flexDirection="row">
+      <text fg={palette().border}>│</text>
+      <text fg={props.value ? palette().foreground : props.theme.colors.mutedForeground}>
+        {` ${content()} `}
+      </text>
+      <text fg={palette().border}>│</text>
+    </box>);
+}
+export function KeyHint(props) {
+    return (<box height={1} width={props.width} overflow="hidden" flexDirection="row">
+      <text fg={props.theme.colors.accent}>{props.keys}</text>
+      <text fg={props.theme.colors.mutedForeground}> {clipTerminal(props.label, 40)}</text>
+    </box>);
+}
+export function EmptyState(props) {
+    const palette = () => recipePalette(props.theme, { empty: true });
+    return (<box width={props.width} height={2} flexDirection="column" overflow="hidden">
+      <box height={1} flexDirection="row" overflow="hidden">
+        <text fg={palette().accent}>{` ${palette().marker}`}</text>
+        <text fg={palette().foreground}>
+          {clipTerminal(` ${props.title}`, Math.max(0, props.width - 2))}
+        </text>
+      </box>
+      <text fg={props.theme.colors.mutedForeground}>
+        {clipTerminal(`   ${props.detail ?? ""}`, props.width)}
+      </text>
+    </box>);
+}
+export function Scrollbar(props) {
+    return (<box width={1} height={props.height} flexDirection="column" overflow="hidden">
+      <For each={scrollbarGlyphs(props.contentRows, props.viewportRows, props.top, props.height)}>
+        {(glyph) => (<text fg={glyph === "█" ? props.theme.colors.accent : props.theme.colors.border}>
+            {glyph}
+          </text>)}
+      </For>
+    </box>);
+}