querysub 0.244.0 → 0.246.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "querysub",
-  "version": "0.244.0",
+  "version": "0.246.0",
   "main": "index.js",
   "license": "MIT",
   "note1": "note on node-forge fork, see https://github.com/digitalbazaar/forge/issues/744 for details",

package/src/deployManager/MachinesPage.tsx

@@ -42,7 +42,7 @@ export class MachinesPage extends qreact.Component {
 
         return <div className={css.vbox(0).fillBoth.pad2(20)}>
             {this.renderTabs()}
-            <div className={css.flexGrow(1).overflowAuto.pad2(20, 10)}>
+            <div className={css.flexGrow(1).overflowAuto.pad2(20, 10).fillWidth}>
                 {currentViewParam.value === "services" && <ServicesListPage />}
                 {currentViewParam.value === "machines" && <MachinesListPage />}
                 {currentViewParam.value === "service-detail" && <ServiceDetailPage />}

package/src/deployManager/components/ServiceDetailPage.tsx

@@ -14,6 +14,9 @@ import { isDefined } from "../../misc";
 import { watchScreenOutput, stopWatchingScreenOutput } from "../machineController";
 import { getPathStr2 } from "../../path";
 import { ScrollOnMount } from "../../library-components/ScrollOnMount";
+import { StickyBottomScroll } from "../../library-components/StickyBottomScroll";
+import { PrimitiveDisplay } from "../../diagnostics/logs/ObjectDisplay";
+import { parseAnsiColors, rgbToHsl } from "../../diagnostics/logs/ansiFormat";
 
 // Type declarations for Monaco editor
 declare global {
@@ -126,7 +129,7 @@ type ServiceConfig = ${serviceConfigType}
                 onData: async (data: string) => {
                     Querysub.localCommit(() => {
                         let fullData = this.state.watchingOutputs[outputKey].data + data;
-                        fullData = fullData.slice(-10000);
+                        fullData = fullData.slice(-10_000_000);
                         this.state.watchingOutputs[outputKey].data = fullData;
                     });
                 }
@@ -304,9 +307,9 @@ type ServiceConfig = ${serviceConfigType}
                 }}
             />
             {/* Machine Status */}
-            {configT.parameters.deploy && <div className={css.vbox(8)}>
+            {configT.parameters.deploy && <div className={css.vbox(8).fillWidth}>
                 <h3>Deployed Machines ({config.machineIds.length})</h3>
-                <div className={css.vbox(4)}>
+                <div className={css.vbox(4).fillWidth}>
                     {machineStatuses.map(({ machineId, machineInfo, serviceInfo, isMachineDead, hasError, index }) => {
                         if (!machineInfo) return <div key={machineId}>Loading {machineId}...</div>;
 
@@ -322,10 +325,10 @@ type ServiceConfig = ${serviceConfigType}
                         let key = config.parameters.key;
                         const outputKey = getPathStr2(key, index + "");
                         const isWatching = this.state.watchingOutputs[outputKey].isWatching;
-                        const outputData = this.state.watchingOutputs[outputKey].data;
+                        let outputData = this.state.watchingOutputs[outputKey].data;
 
                         return <div key={machineId}
-                            className={css.pad2(12).vbox(10).bord2(0, 0, 20) + backgroundColor}
+                            className={css.pad2(12).vbox(10).bord2(0, 0, 20).fillWidth + backgroundColor}
                         >
                             <div
                                 className={css.hbox(12)}
@@ -424,17 +427,23 @@ type ServiceConfig = ${serviceConfigType}
                                         css.pad2(8).bord2(0, 0, 10).hsl(0, 0, 10).colorhsl(0, 0, 100)
                                             .whiteSpace("pre-wrap").fontFamily("monospace")
                                             .overflowAuto
-                                            .maxHeight("60vh")
+                                            .height("60vh")
+                                            .vbox0
                                             .fillWidth
                                     }
-                                    // Gives the user the cursor, which makes navigating nice
-                                    contentEditable
                                     onClick={e => e.stopPropagation()}
-
                                 >
-                                    {outputData && outputData || "Waiting for output..."}
-                                    {/* <div className={css.size(1, `65vh`)} /> */}
-                                    <ScrollOnMount debugText={`Screen ${outputKey}`} />
+                                    <div className={css.flexShrink0}>
+                                        {(() => {
+                                            let parts = parseAnsiColors(outputData);
+                                            return parts.map(({ text, color }) => {
+                                                if (!color) return <span>{text}</span>;
+                                                let hue = rgbToHsl(color).h;
+                                                return <span className={css.hsl(hue, 60, 30)}>{text}</span>;
+                                            });
+                                        })()}
+                                    </div>
+                                    <StickyBottomScroll debugText={`Screen ${outputKey}`} time={Date.now()} />
                                 </div>
                             }
                         </div>;
@@ -453,7 +462,7 @@ type ServiceConfig = ${serviceConfigType}
                         configT.parameters.deploy = newDeployStatus;
                         void this.updateUnsavedChanges(configT);
                     }}>
-                    {configT.parameters.deploy ? "🔒 Disable" : "🚀 Enable"}
+                    {configT.parameters.deploy ? "⏸️ Disable" : "🚀 Enable"}
                 </button>
 
                 <button className={css.pad2(12, 8).button.bord2(0, 0, 20).hsl(0, 0, 80)}

package/src/deployManager/machineApplyMainCode.ts

@@ -87,7 +87,6 @@ export async function streamScreenOutput(config: {
 
     async function stop() {
         if (stopped) return;
-        console.log(`Stopping stream output for ${screenName}`);
         stopped = true;
 
         if (childProcess) {
@@ -100,7 +99,7 @@ export async function streamScreenOutput(config: {
             const pipeFile = `${root}${screenName}/pipe.txt`;
 
             // Use tail -f to follow the pipe file
-            childProcess = spawn(`tail`, ["-f", pipeFile, "--retry", "--lines", "1000"], {
+            childProcess = spawn(`tail`, ["-f", pipeFile, "--lines", "1000"], {
                 stdio: "pipe",
             });
 
@@ -108,7 +107,6 @@ export async function streamScreenOutput(config: {
 
             childProcess.stdout?.on("data", (data) => {
                 if (stopped) return;
-                console.log(`Captured data for ${screenName}: ${data.length}`);
                 started.resolve();
                 void onDataWrapped(data.toString());
             });
@@ -299,18 +297,21 @@ ${config.command}
     let pipeScript = path.resolve(config.folder + "../pipe.sh");
     await fs.promises.writeFile(pipeScript, `#!/bin/bash
 line_count=0
+max_lines_limit=$((${PIPE_FILE_LINE_LIMIT} * 100))
+keep_lines_count=$((${PIPE_FILE_LINE_LIMIT} * 50))
+
 while IFS= read -r line; do
     echo "$line" >> "${pipeFile}"
     ((line_count++))
     
-    # Check file size every 100 lines to avoid too much overhead
+    # Check line count every ${PIPE_FILE_LINE_LIMIT} lines to avoid too much overhead
     if (( line_count % ${PIPE_FILE_LINE_LIMIT} == 0 )); then
         if [ -f "${pipeFile}" ]; then
-            # Get file size (works on both Linux and macOS)
-            filesize=$(stat -f%z "${pipeFile}" 2>/dev/null || stat -c%s "${pipeFile}" 2>/dev/null || echo 0)
-            if [ "$filesize" -gt 1048576 ]; then
-                # Keep only the last 1000 lines when file gets too big
-                tail -n ${PIPE_FILE_LINE_LIMIT} "${pipeFile}" > "${pipeFile}.tmp" && mv "${pipeFile}.tmp" "${pipeFile}"
+            # Count total lines in file
+            total_lines=$(wc -l < "${pipeFile}")
+            if [ "$total_lines" -gt "$max_lines_limit" ]; then
+                # Keep only the last N lines when file gets too many lines
+                tail -n "$keep_lines_count" "${pipeFile}" > "${pipeFile}.tmp" && mv "${pipeFile}.tmp" "${pipeFile}"
             fi
         fi
     fi
@@ -391,6 +392,10 @@ const resyncServicesBase = runInSerial(measureWrap(async function resyncServices
     for (let config of relevantConfigs) {
         let matchedCount = config.machineIds.filter(id => id === machineId).length;
         for (let i = 0; i < matchedCount; i++) {
+            let screenName = getScreenName({
+                serviceKey: config.parameters.key,
+                index: i,
+            });
 
             let launchCount = launchesPerService.get(config.serviceId) || 0;
             let lastLaunchedTime = lastLaunchedTimePerService.get(config.serviceId) || 0;
@@ -400,11 +405,7 @@ const resyncServicesBase = runInSerial(measureWrap(async function resyncServices
                 totalTimesLaunched: launchCount,
             };
             try {
-                let folder = root + config.parameters.key + "-" + i + "/";
-                let screenName = getScreenName({
-                    serviceKey: config.parameters.key,
-                    index: i,
-                });
+                let folder = root + screenName + "/";
                 screenNamesUsed.add(screenName);
                 let gitFolder = folder + "git/";
                 await fs.promises.mkdir(gitFolder, { recursive: true });

package/src/deployManager/machineController.ts

@@ -133,7 +133,6 @@ class MachineControllerClientBase {
     }): Promise<void> {
         let forwardToNodeId = forwardedCallbacks.get(config.callbackId);
         if (forwardToNodeId) {
-            console.log(`onScreenOutput forward ${config.callbackId} ${config.data.length}`);
             await MachineControllerClient.nodes[forwardToNodeId].onScreenOutput({
                 key: config.key,
                 index: config.index,
@@ -142,7 +141,6 @@ class MachineControllerClientBase {
             });
             return;
         }
-        console.log(`onScreenOutput ${config.callbackId} ${config.data.length}`);
 
         let callback = callbacks.get(config.callbackId);
         if (!callback) {

package/src/deployManager/spec.txt

@@ -1,13 +1,6 @@
-todonext;
-Syncing isn't updating?
-
-3) Hmm... being able to watch the output for a service would be useful, and... it should be... trivial to do?
-    - Buttons per key + index, which we can figure out clientside. Stream results under the button, and we can stream multiple at once?
-    - OH, just for superusers, so the browser can connect directly!
-
 2) Verify when the file is truncated it still works
 
-3) OH! I think if something is scrollable, and is scrolled down, it'll stick to the bottom. We just need it to start scrollable!
+2) Apply ansi coloring / whatever type we use
 
 4) Destroy our testing digital ocean server
 

package/src/diagnostics/logs/ObjectDisplay.tsx

@@ -126,7 +126,7 @@ export class ObjectDisplay extends qreact.Component<{
     }
 }
 
-class PrimitiveDisplay extends qreact.Component<{
+export class PrimitiveDisplay extends qreact.Component<{
     value: unknown;
 }> {
     render() {

package/src/diagnostics/logs/ansiFormat.ts

@@ -30,7 +30,7 @@ const basicToRGB: Record<number, { r: number; g: number; b: number }> = {
 export function parseAnsiColors(input: string): ColorGroup[] {
     const result: ColorGroup[] = [];
     let currentIndex = 0;
-    const regex = /\x1b\[(38;2;(\d+);(\d+);(\d+)m|(\d+)m)/g;
+    const regex = /\x1b\[(38;2;(\d+);(\d+);(\d+)m|38;5;(\d+)m|(\d+)m)/g;
     let match;
 
     while ((match = regex.exec(input)) !== null) {
@@ -49,8 +49,9 @@ export function parseAnsiColors(input: string): ColorGroup[] {
         const text = input.slice(colorStart, textEnd);
 
         if (text) {
-            const [, fullColor, r, g, b, basicCode] = match;
+            const [, fullColor, r, g, b, paletteIndex, basicCode] = match;
             if (r && g && b) {
+                // 24-bit RGB color (38;2;r;g;b)
                 result.push({
                     text,
                     color: {
@@ -59,7 +60,30 @@ export function parseAnsiColors(input: string): ColorGroup[] {
                         b: parseInt(b)
                     }
                 });
+            } else if (paletteIndex) {
+                // 216-color palette (38;5;index)
+                const index = parseInt(paletteIndex);
+                if (index >= 16 && index < 232) {
+                    // Convert 216-color palette index back to RGB
+                    const paletteValue = index - 16;
+                    const rIndex = Math.floor(paletteValue / 36);
+                    const gIndex = Math.floor((paletteValue % 36) / 6);
+                    const bIndex = paletteValue % 6;
+
+                    result.push({
+                        text,
+                        color: {
+                            r: Math.round(rIndex / 5 * 255),
+                            g: Math.round(gIndex / 5 * 255),
+                            b: Math.round(bIndex / 5 * 255)
+                        }
+                    });
+                } else {
+                    // Handle other palette ranges if needed (16 basic colors, grayscale, etc.)
+                    result.push({ text });
+                }
             } else if (basicCode) {
+                // Basic color codes (30-37, 90-97)
                 const code = parseInt(basicCode);
                 const rgbColor = basicToRGB[code];
                 result.push({

package/src/functional/runCommand.ts

@@ -14,8 +14,7 @@ export async function runPromise(command: string, config?: {
         const childProc = child_process.spawn(command, {
             shell: true,
             cwd: config?.cwd,
-            // NOTE: Now we pipe stdin, as I think inheriting it was causing us to block sometimes?
-            stdio: ["pipe", "pipe", "pipe"],
+            stdio: ["inherit", "pipe", "pipe"],
         });
 
         let fullOutput = "";

package/src/library-components/StickyBottomScroll.tsx

@@ -0,0 +1,41 @@
+import { css } from "../4-dom/css";
+import { qreact } from "../4-dom/qreact";
+import { Querysub } from "../4-querysub/QuerysubController";
+/** MOST of the time ScrollOnMount will work. But sometimes it won't, in which case this case work IF the holder size is fixed.
+ *      - This also works well with cases where your content starts small, as this forces you to always have overflow, and also a bit of buffer at the bottom.
+ * 
+ *  Put directly inside of the scrollable parent, that has vbox0, and put flexShrink0 on the other content.
+*/
+export class StickyBottomScroll extends qreact.Component<{
+    debugText: string;
+    // Pass so we re-render every time the parent re-renders
+    time: number;
+}> {
+    scrollElement: HTMLElement | undefined;
+    render() {
+        this.props.time;
+        const elem = this.scrollElement;
+        let debugText = this.props.debugText;
+        if (elem) {
+            let isScrolledToBottom = elem.scrollHeight - elem.scrollTop - elem.clientHeight < 50;
+            if (isScrolledToBottom) {
+                Querysub.afterAllRendersFinished(() => {
+                    console.log(`StickyBottomScroll scrolling to bottom (${debugText})`);
+                    elem.scrollTop = elem.scrollHeight;
+                });
+            }
+        }
+        return (
+            <>
+                <div
+                    key={this.props.debugText + "StickyBottomScroll"}
+                    className={css.size(1, `calc(100% + 5px)`)}
+                    ref2={e => {
+                        this.scrollElement = e.parentElement!;
+                    }}
+                />
+                <div className={css.size(1, 50).flexShrink0} />
+            </>
+        );
+    }
+}