dev3000 0.0.170 → 0.0.173

package/dist/tui-interface-opentui.js

@@ -117,6 +117,7 @@ class D3kTUI {
     statusText = null;
     // State
     appPort;
+    appUrl;
     useHttps;
     portConfirmed = false;
     updateInfo;
@@ -130,14 +131,21 @@ class D3kTUI {
     debugMode = false;
     lastFocusedId = null;
     debugLogFile = join(process.env.HOME || tmpdir(), ".d3k", "tui-debug.log");
+    selectionDebugEnabled = process.env.D3K_TUI_SELECTION_DEBUG !== "0";
+    selectionDebugLogFile = join(process.env.HOME || tmpdir(), ".d3k", "tui-selection-debug.log");
     lastCopiedSelection = null;
     selectionCopyHandler = null;
     isCompact = false;
     isVeryCompact = false;
     isRebuilding = false;
+    logContentWidth = 80;
+    logRenderables = new Map();
+    logSelection = null;
+    logSelectionBackground = RGBA.fromInts(70, 130, 180);
     constructor(options) {
         this.options = options;
         this.appPort = options.appPort;
+        this.appUrl = options.appUrl || null;
         this.useHttps = options.useHttps || false;
         this.updateInfo = options.updateInfo || null;
     }
@@ -167,6 +175,7 @@ class D3kTUI {
         const originalStderrWrite = process.stderr.write.bind(process.stderr);
         process.stdout.write = createFilteredWrite(originalStdoutWrite);
         process.stderr.write = createFilteredWrite(originalStderrWrite);
+        this.initializeSelectionDebugLog();
         this.renderer = await createCliRenderer(config);
         // Setup UI after renderer is created
         this.setupUI();
@@ -182,10 +191,15 @@ class D3kTUI {
         // Force a redraw after start to ensure borders render correctly
         process.stdout.write("\x1b[2J\x1b[H");
         this.renderer.requestRender();
+        setTimeout(() => {
+            this.logSelectionDebug(`[START] renderer=${this.renderer?.width}x${this.renderer?.height} logContentWidth=${this.logContentWidth}`);
+            this.logLogPaneMetrics("post-start");
+        }, 150);
         return {
             app: { unmount: () => this.shutdown() },
             updateStatus: (status) => this.setStatus(status),
             updateAppPort: (port) => this.setAppPort(port),
+            updateAppUrl: (url) => this.setAppUrl(url),
             updateUpdateInfo: (info) => this.setUpdateInfo(info),
             updateUseHttps: (useHttps) => this.setUseHttps(useHttps)
         };
@@ -196,6 +210,7 @@ class D3kTUI {
         const { width, height } = this.renderer;
         const isCompact = width < 80;
         const isVeryCompact = width < 60 || height < 15;
+        this.logContentWidth = Math.max(20, width - 6);
         this.isCompact = isCompact;
         this.isVeryCompact = isVeryCompact;
         // Main container
@@ -230,7 +245,6 @@ class D3kTUI {
             stickyStart: "bottom",
             scrollAcceleration: new MacOSScrollAccel({ maxMultiplier: 8 }),
             viewportCulling: false, // Disable culling to ensure all items are in hit grid
-            paddingLeft: 1, // Force left position calculation for selection hit testing
             onMouse: (event) => {
                 // Log ALL mouse events to understand the flow
                 if (event.type === "down" || event.type === "up") {
@@ -241,47 +255,65 @@ class D3kTUI {
                     const targetW = target?.width ?? "?";
                     const targetH = target?.height ?? "?";
                     this.debugLog(`[MOUSE_${event.type.toUpperCase()}] screen(${event.x},${event.y}) target=${targetId} pos(${targetX},${targetY}) size(${targetW}x${targetH}) selectable=${target?.selectable} hasSelection=${this.renderer?.hasSelection}`);
+                    this.logSelectionDebug(`[MOUSE_${event.type.toUpperCase()}] screen(${event.x},${event.y}) target=${targetId} pos(${targetX},${targetY}) size(${targetW}x${targetH}) selectable=${target?.selectable} ${this.describeSelection()}`);
                 }
             },
             onMouseDown: (event) => {
-                if (this.renderer && !this.renderer.hasSelection && event.button === 0) {
-                    const target = event.target;
-                    if (!target?.selectable) {
-                        const logLine = this.findLogLineAt(event.x, event.y);
-                        if (logLine) {
-                            this.renderer.startSelection(logLine, event.x, event.y);
-                        }
+                if (event.button === 0) {
+                    const logLine = this.getSelectionLogLine(event);
+                    if (logLine) {
+                        this.logSelectionDebug(`[START_SELECTION] target=${logLine.id} pos(${logLine.x},${logLine.y}) size(${logLine.width}x${logLine.height}) screen(${event.x},${event.y})`);
+                        this.beginLogSelection(logLine.id, event.x, event.y);
+                        this.logSelectionDebug(`[START_SELECTION_AFTER] ${this.describeSelection()}`);
                     }
                 }
                 const target = event.target;
                 const targetId = target?.id || "(none)";
                 const selection = this.renderer?.getSelection();
-                this.debugLog(`[MOUSE_DOWN_CB] x=${event.x}, y=${event.y}, target=${targetId}, hasSelection=${this.renderer?.hasSelection}, isSelecting=${selection?.isSelecting}`);
+                this.debugLog(`[MOUSE_DOWN_CB] x=${event.x}, y=${event.y}, target=${targetId}, hasSelection=${this.renderer?.hasSelection}, isDragging=${selection?.isDragging}`);
+                this.logSelectionDebug(`[MOUSE_DOWN_CB] x=${event.x}, y=${event.y}, target=${targetId} ${this.describeSelection()}`);
             },
             onMouseUp: (event) => {
-                const selection = this.renderer?.getSelection();
-                const selectedText = selection?.getSelectedText() || "(none)";
-                this.debugLog(`[MOUSE_UP] x=${event.x}, y=${event.y}, hasSelection=${this.renderer?.hasSelection}, text="${selectedText.slice(0, 30)}"`);
+                if (event.button === 0) {
+                    const logLine = this.getSelectionLogLine(event);
+                    this.finishLogSelection(logLine?.id ?? null, event.x, event.y);
+                    this.logSelectionDebug(`[FINISH_SELECTION] target=${logLine?.id || "(none)"} screen(${event.x},${event.y}) ${this.describeSelection()}`);
+                }
+                const selectedText = this.getSelectedLogText() || "(none)";
+                this.debugLog(`[MOUSE_UP] x=${event.x}, y=${event.y}, hasSelection=${Boolean(this.logSelection)}, text="${selectedText.slice(0, 30)}"`);
+                this.logSelectionDebug(`[MOUSE_UP] x=${event.x}, y=${event.y}, text="${selectedText.slice(0, 60)}" ${this.describeSelection()}`);
             },
             onMouseDrag: (event) => {
+                if (this.logSelection) {
+                    const logLine = this.getSelectionLogLine(event);
+                    this.updateLogSelection(logLine?.id ?? null, event.x, event.y);
+                    this.logSelectionDebug(`[UPDATE_SELECTION] target=${logLine?.id || "(none)"} screen(${event.x},${event.y}) ${this.describeSelection()}`);
+                }
                 const target = event.target;
                 const targetId = target?.id || "(none)";
-                this.debugLog(`[MOUSE_DRAG] x=${event.x}, y=${event.y}, target=${targetId}, isSelecting=${event.isSelecting}`);
+                this.debugLog(`[MOUSE_DRAG] x=${event.x}, y=${event.y}, target=${targetId}, isDragging=${event.isDragging}`);
+                this.logSelectionDebug(`[MOUSE_DRAG] x=${event.x}, y=${event.y}, target=${targetId}, eventDragging=${event.isDragging} ${this.describeSelection()}`);
             }
         });
+        this.logsScrollBox.content.flexDirection = "column";
+        this.logsScrollBox.content.left = 0;
+        this.logsScrollBox.content.top = 0;
+        this.logsScrollBox.content.width = this.logContentWidth;
         logsSection.add(this.logsScrollBox);
         // Track focus changes on scroll box
         this.logsScrollBox.on("focused", () => {
             this.debugLog(`[FOCUS] logsScrollBox focused`);
+            this.logSelectionDebug("[FOCUS] logsScrollBox focused");
         });
         this.logsScrollBox.on("blurred", () => {
             this.debugLog(`[FOCUS] logsScrollBox blurred`);
+            this.logSelectionDebug("[FOCUS] logsScrollBox blurred");
         });
         // Container for log lines inside scroll box - provides valid X positions
         this.logsContainer = new BoxRenderable(this.renderer, {
             id: "logs-content",
             flexDirection: "column",
-            width: "100%"
+            width: this.logContentWidth
         });
         this.logsScrollBox.add(this.logsContainer);
         // Bottom status line - show "agent has access" hint in both modes
@@ -316,12 +348,27 @@ class D3kTUI {
         this.renderer.root.onSizeChange = () => {
             if (!this.renderer || this.isRebuilding)
                 return;
+            this.logContentWidth = Math.max(20, this.renderer.width - 6);
             const nextCompact = this.renderer.width < 80;
             const nextVeryCompact = this.renderer.width < 60 || this.renderer.height < 15;
             if (nextCompact !== this.isCompact || nextVeryCompact !== this.isVeryCompact) {
                 this.rebuildUI();
                 return;
             }
+            if (this.logsContainer) {
+                this.logsContainer.width = this.logContentWidth;
+            }
+            if (this.logsScrollBox) {
+                this.logsScrollBox.content.left = 0;
+                this.logsScrollBox.content.top = 0;
+                this.logsScrollBox.content.width = this.logContentWidth;
+            }
+            for (const child of this.logsContainer?.getChildren() || []) {
+                if (child instanceof TextRenderable) {
+                    child.width = this.logContentWidth;
+                    child.left = 0;
+                }
+            }
             this.renderer.requestRender();
         };
     }
@@ -378,11 +425,12 @@ class D3kTUI {
         headerBox.add(infoCol);
         const protocol = this.useHttps ? "https" : "http";
         const portStatus = this.portConfirmed ? "" : " ...";
+        const displayedAppUrl = this.appUrl || `${protocol}://localhost:${this.appPort}`;
         const appLine = new TextRenderable(this.renderer, {
             id: "app-url",
             content: this.portConfirmed
-                ? t `${cyan(`🌐 App: ${protocol}://localhost:${this.appPort}`)}`
-                : t `${cyan(`🌐 App: ${protocol}://localhost:${this.appPort}`)}${yellow(portStatus)}`
+                ? t `${cyan(`🌐 App: ${displayedAppUrl}`)}`
+                : t `${cyan(`🌐 App: ${displayedAppUrl}`)}${yellow(portStatus)}`
         });
         infoCol.add(appLine);
         // Show logs path with ~/ instead of full home path
@@ -497,6 +545,7 @@ class D3kTUI {
                     this.baseLogId = undefined;
                     this.refreshLogs();
                 }
+                this.clearLogSelection();
                 this.renderer?.clearSelection();
                 return;
             }
@@ -530,7 +579,7 @@ class D3kTUI {
                 const focusedId = focusedRenderable?.id || "(none)";
                 const selectionContainer = this.renderer?.getSelectionContainer();
                 const containerId = selectionContainer?.id || "(none)";
-                const message = `hasSelection: ${hasSelection}, isSelecting: ${selection?.isSelecting}, renderables: ${selection?.selectedRenderables?.length ?? 0}, focus: ${focusedId}, container: ${containerId}, text: "${selectedText.slice(0, 30)}"`;
+                const message = `hasSelection: ${hasSelection}, isDragging: ${selection?.isDragging}, renderables: ${selection?.selectedRenderables?.length ?? 0}, focus: ${focusedId}, container: ${containerId}, text: "${selectedText.slice(0, 30)}"`;
                 // Write to file if debug mode is on
                 this.debugLog(`[SELECTION_STATE] ${message}`);
                 // Always show in UI
@@ -588,9 +637,11 @@ class D3kTUI {
         this.selectionCopyHandler = (selection) => {
             if (!selection) {
                 this.lastCopiedSelection = null;
+                this.logSelectionDebug("[SELECTION_EVENT] selection cleared");
                 return;
             }
-            if (selection.isSelecting || !selection.isActive)
+            this.logSelectionDebug(`[SELECTION_EVENT] ${this.describeSelection(selection)}`);
+            if (selection.isDragging || !selection.isActive)
                 return;
             const text = selection.getSelectedText();
             if (!text || text.trim().length === 0)
@@ -599,14 +650,12 @@ class D3kTUI {
                 return;
             this.lastCopiedSelection = text;
             this.copyToClipboard(text);
+            this.logSelectionDebug(`[SELECTION_COPY] length=${text.length} text="${text.slice(0, 120)}"`);
         };
         this.renderer.on("selection", this.selectionCopyHandler);
     }
     copySelectionToClipboard() {
-        if (!this.renderer)
-            return;
-        const selection = this.renderer.getSelection();
-        const text = selection?.getSelectedText();
+        const text = this.getSelectedLogText() || this.renderer?.getSelection()?.getSelectedText();
         if (!text || text.trim().length === 0)
             return;
         this.lastCopiedSelection = text;
@@ -708,16 +757,18 @@ class D3kTUI {
                 id: `log-${log.id}`,
                 content: formatted,
                 wrapMode: "none",
-                selectable: true,
+                selectable: false,
                 selectionBg: RGBA.fromInts(70, 130, 180), // Steel blue highlight
                 selectionFg: RGBA.fromInts(255, 255, 255), // White text on selection
-                width: "100%",
+                width: this.logContentWidth,
+                left: 0,
                 flexShrink: 0,
                 onMouseDown: (event) => {
                     // Record start position for click detection
                     clickStartX = event.x;
                     clickStartY = event.y;
                     this.debugLog(`[TEXT_DOWN] id=${logLine.id} screen(${event.x},${event.y}) pos(${logLine.x},${logLine.y}) size(${logLine.width}x${logLine.height})`);
+                    this.logSelectionDebug(`[TEXT_DOWN] id=${logLine.id} screen(${event.x},${event.y}) pos(${logLine.x},${logLine.y}) size(${logLine.width}x${logLine.height})`);
                 },
                 onMouseUp: (event) => {
                     // Check if this was a click (no movement) vs a drag
@@ -728,6 +779,7 @@ class D3kTUI {
                         const textLocalX = event.x - (logLine.x || 0);
                         const TIMESTAMP_COLUMN_WIDTH = 15; // "[HH:MM:SS.mmm] " is ~14 chars
                         if (textLocalX <= TIMESTAMP_COLUMN_WIDTH) {
+                            this.clearLogSelection();
                             // Toggle baseline timestamp on click
                             const timestampMs = parseTimestampToMs(log.timestamp);
                             if (timestampMs !== null) {
@@ -750,11 +802,16 @@ class D3kTUI {
                     clickStartY = -1;
                 }
             });
+            this.logRenderables.set(log.id, logLine);
             this.logsContainer.add(logLine);
+            this.updateLogLineSelectionStyle(log.id);
         }
         // Force render to update hit grid after adding new logs
         // This prevents stale hit grid when new logs trigger scroll/layout changes
         this.renderer.requestRender();
+        setTimeout(() => {
+            this.logLogPaneMetrics(`after-add-${newLogs.length}`);
+        }, 0);
     }
     findLogLineAt(x, y) {
         if (!this.logsContainer)
@@ -769,6 +826,36 @@ class D3kTUI {
         }
         return null;
     }
+    findLogLineAtRow(y) {
+        if (!this.logsContainer)
+            return null;
+        for (const child of this.logsContainer.getChildren()) {
+            if (!(child instanceof TextRenderable))
+                continue;
+            const withinY = y >= child.y && y < child.y + Math.max(child.height, 1);
+            if (withinY)
+                return child;
+        }
+        return null;
+    }
+    getSelectionLogLine(event) {
+        const target = event.target;
+        if (target?.id?.startsWith("log-")) {
+            const child = this.logsContainer?.getChildren().find((entry) => entry.id === target.id);
+            if (child instanceof TextRenderable) {
+                this.logSelectionDebug(`[HIT] direct target=${target.id} pos(${child.x},${child.y}) size(${child.width}x${child.height})`);
+                return child;
+            }
+        }
+        const fallback = this.findLogLineAt(event.x, event.y);
+        if (fallback) {
+            this.logSelectionDebug(`[HIT] fallback screen(${event.x},${event.y}) -> ${fallback.id} pos(${fallback.x},${fallback.y}) size(${fallback.width}x${fallback.height})`);
+            return fallback;
+        }
+        const rowFallback = this.findLogLineAtRow(event.y);
+        this.logSelectionDebug(`[HIT] row-fallback screen(${event.x},${event.y}) -> ${rowFallback?.id || "(none)"} pos(${rowFallback?.x ?? "?"},${rowFallback?.y ?? "?"}) size(${rowFallback?.width ?? "?"}x${rowFallback?.height ?? "?"})`);
+        return rowFallback;
+    }
     refreshLogs() {
         if (!this.renderer || !this.logsContainer)
             return;
@@ -776,9 +863,107 @@ class D3kTUI {
         for (const child of this.logsContainer.getChildren()) {
             child.destroy();
         }
+        this.logRenderables.clear();
         // Re-add filtered logs
         const filteredLogs = this.logs.filter((log) => log.id > this.clearFromLogId);
         this.addLogLines(filteredLogs);
+        this.normalizeLogSelection();
+    }
+    beginLogSelection(logRenderableId, x, y) {
+        const logId = this.parseLogRenderableId(logRenderableId);
+        if (logId === null)
+            return;
+        this.logSelection = {
+            anchorLogId: logId,
+            focusLogId: logId,
+            startX: x,
+            startY: y,
+            hasDragged: false
+        };
+        this.updateLogSelectionStyles();
+    }
+    updateLogSelection(logRenderableId, x, y) {
+        if (!this.logSelection)
+            return;
+        const logId = logRenderableId ? this.parseLogRenderableId(logRenderableId) : null;
+        if (logId !== null) {
+            this.logSelection.focusLogId = logId;
+        }
+        if (x !== this.logSelection.startX || y !== this.logSelection.startY) {
+            this.logSelection.hasDragged = true;
+        }
+        this.updateLogSelectionStyles();
+    }
+    finishLogSelection(logRenderableId, x, y) {
+        if (!this.logSelection)
+            return;
+        this.updateLogSelection(logRenderableId, x, y);
+        if (!this.logSelection?.hasDragged) {
+            this.clearLogSelection();
+            return;
+        }
+        const text = this.getSelectedLogText();
+        if (!text || text.trim().length === 0 || text === this.lastCopiedSelection)
+            return;
+        this.lastCopiedSelection = text;
+        this.copyToClipboard(text);
+        this.logSelectionDebug(`[SELECTION_COPY] length=${text.length} text="${text.slice(0, 120)}"`);
+    }
+    clearLogSelection() {
+        if (!this.logSelection)
+            return;
+        this.logSelection = null;
+        this.updateLogSelectionStyles();
+    }
+    normalizeLogSelection() {
+        if (!this.logSelection)
+            return;
+        const selectedLogIds = this.getSelectedLogIds();
+        if (selectedLogIds.length === 0) {
+            this.logSelection = null;
+            this.updateLogSelectionStyles();
+        }
+    }
+    getSelectedLogIds() {
+        if (!this.logSelection)
+            return [];
+        const visibleLogIds = [...this.logRenderables.keys()].sort((a, b) => a - b);
+        const anchorIndex = visibleLogIds.indexOf(this.logSelection.anchorLogId);
+        const focusIndex = visibleLogIds.indexOf(this.logSelection.focusLogId);
+        if (anchorIndex === -1 || focusIndex === -1)
+            return [];
+        const startIndex = Math.min(anchorIndex, focusIndex);
+        const endIndex = Math.max(anchorIndex, focusIndex);
+        return visibleLogIds.slice(startIndex, endIndex + 1);
+    }
+    getSelectedLogText() {
+        const selectedIds = new Set(this.getSelectedLogIds());
+        if (selectedIds.size === 0)
+            return "";
+        return this.logs
+            .filter((log) => log.id > this.clearFromLogId && selectedIds.has(log.id))
+            .map((log) => log.content)
+            .join("\n");
+    }
+    updateLogSelectionStyles() {
+        for (const logId of this.logRenderables.keys()) {
+            this.updateLogLineSelectionStyle(logId);
+        }
+        this.renderer?.requestRender();
+    }
+    updateLogLineSelectionStyle(logId) {
+        const renderable = this.logRenderables.get(logId);
+        if (!renderable)
+            return;
+        const selectedIds = new Set(this.getSelectedLogIds());
+        renderable.bg = selectedIds.has(logId) ? this.logSelectionBackground : undefined;
+    }
+    parseLogRenderableId(logRenderableId) {
+        const match = logRenderableId.match(/^log-(\d+)$/);
+        if (!match)
+            return null;
+        const logId = Number.parseInt(match[1], 10);
+        return Number.isNaN(logId) ? null : logId;
     }
     updateStatusDisplay() {
         if (!this.statusText || !this.renderer)
@@ -809,6 +994,10 @@ class D3kTUI {
         this.portConfirmed = true;
         this.rebuildUI();
     }
+    setAppUrl(url) {
+        this.appUrl = url;
+        this.rebuildUI();
+    }
     setUpdateInfo(info) {
         this.updateInfo = info;
         this.updateStatusDisplay();
@@ -835,6 +1024,58 @@ class D3kTUI {
             // Ignore write errors
         }
     }
+    initializeSelectionDebugLog() {
+        if (!this.selectionDebugEnabled)
+            return;
+        try {
+            mkdirSync(join(process.env.HOME || tmpdir(), ".d3k"), { recursive: true });
+            writeFileSync(this.selectionDebugLogFile, [
+                `Selection debug started at ${new Date().toISOString()}`,
+                `project=${this.options.projectName || "(unknown)"}`,
+                `logFile=${this.options.logFile}`,
+                `appPort=${this.options.appPort}`,
+                ""
+            ].join("\n"));
+        }
+        catch {
+            // Ignore write errors
+        }
+    }
+    logSelectionDebug(message) {
+        if (!this.selectionDebugEnabled)
+            return;
+        const timestamp = new Date().toISOString();
+        try {
+            appendFileSync(this.selectionDebugLogFile, `[${timestamp}] ${message}\n`);
+        }
+        catch {
+            // Ignore write errors
+        }
+    }
+    describeSelection(selection = this.renderer?.getSelection() || null) {
+        const logSelectionIds = this.getSelectedLogIds();
+        const logSelectionText = this.getSelectedLogText();
+        const logSelectionDescription = logSelectionIds.length === 0
+            ? "logSelection=(none)"
+            : `logSelection={dragging:${Boolean(this.logSelection?.hasDragged)},lines:${logSelectionIds.length},textLen:${logSelectionText.length}}`;
+        if (!selection) {
+            return logSelectionDescription;
+        }
+        const text = selection.getSelectedText();
+        return `${logSelectionDescription} nativeSelection={active:${selection.isActive},dragging:${selection.isDragging},renderables:${selection.selectedRenderables.length},textLen:${text.length}}`;
+    }
+    logLogPaneMetrics(reason) {
+        if (!this.selectionDebugEnabled)
+            return;
+        const children = this.logsContainer?.getChildren() || [];
+        const logLines = children.filter((child) => child instanceof TextRenderable);
+        const sample = logLines
+            .slice(0, 3)
+            .map((line) => `${line.id}@(${line.x},${line.y}) ${line.width}x${line.height}`)
+            .join(", ");
+        const last = logLines.at(-1);
+        this.logSelectionDebug(`[LAYOUT:${reason}] scroll=${this.logsScrollBox?.x ?? "?"},${this.logsScrollBox?.y ?? "?"} ${this.logsScrollBox?.width ?? "?"}x${this.logsScrollBox?.height ?? "?"} content=${this.logsContainer?.x ?? "?"},${this.logsContainer?.y ?? "?"} ${this.logsContainer?.width ?? "?"}x${this.logsContainer?.height ?? "?"} lines=${logLines.length} sample=[${sample}] last=${last ? `${last.id}@(${last.x},${last.y}) ${last.width}x${last.height}` : "(none)"}`);
+    }
     shutdown() {
         unwatchFile(this.options.logFile);
         if (this.renderer) {