@timurproko/a1 0.1.8-dev.136 → 0.1.8-dev.139

package/dist/integrations/pi/owned-ui/session-shell-root.js

@@ -1,4 +1,4 @@
-import { MOUSE_TRACKING_OFF, MOUSE_TRACKING_ON, parseMouseInput } from "../../../ui/components/index.js";
+import { TranscriptViewport, backgroundSgrSpan, composeSubmittedPromptRows, displayWidth, formatSubmittedPromptTime, overlaySpan, submittedPromptLayout, routeMouseInput, scrollForTrackPage, scrollForThumbRow, scrollbarSelectionRows, scrollbarWheelRows, } from "../../../ui/components/index.js";
 import { PINNED_PI_HIDDEN_COMMAND_NAMES, PINNED_PI_WORKFLOW_COMMAND_NAMES, } from "../engine/index.js";
 import { createPiExtensionUiBridge, createPiQueuedInputStatus, createPiShellArmin, createPiShellAuthProviderSelector, createPiShellChangelog, createPiShellDaxnuts, createPiShellDialog, createPiShellEarendilAnnouncement, createPiShellEditor, createPiShellExtensionSelector, createPiShellFooter, createPiShellHeader, createPiShellHotkeys, createPiShellLoadedResources, createPiShellLoginDialog, createPiShellModelSelector, createPiShellOperationLoader, createPiShellReloadBox, createPiShellScopedModelsSelector, createPiShellSelector, createPiShellSessionInfo, createPiShellSessionSelector, createPiShellSettingsSelector, createPiShellStatus, createPiShellTranscriptComponent, createPiShellTreeSelector, createPiShellTrustSelector, createPiShellUserMessageSelector, onPiThemeChange, piTheme, renderPiShellPackageUpdateNotice, renderPiShellStartupDiagnostic, renderPiShellStatusText, renderPiShellTranscriptBlock, } from "../components/index.js";
 import { PiTuiRuntimeAdapter, } from "../tui-runtime/index.js";
@@ -10,6 +10,8 @@ export class OwnedUiSessionShellRoot {
     #transcript = new Map();
     #blocksById = new Map();
     #renderedRows = new Map();
+    /** Flattened transcript rows reused by wheel, rail, jump, and selection frames. */
+    #documentLayouts = new Map();
     #themeUnsubscribe;
     #transcriptOrder = [];
     #view;
@@ -17,6 +19,20 @@ export class OwnedUiSessionShellRoot {
     #footer;
     #queued;
     #extensionRenderers;
+    #customViewport;
+    #submittedPromptComposer;
+    #viewport = new TranscriptViewport();
+    #viewportConfig = {
+        scrollbarAppearance: "hover",
+        scrollbarStyle: "thin",
+        scrollbarSpeed: "normal",
+    };
+    #dragGrabOffset = null;
+    /** A left-button sequence begun in status/editor/footer chrome is swallowed. */
+    #dockPointerSuppressed = false;
+    #selectionAutoScrollTimer;
+    #selectionAutoScrollPointer;
+    #viewportActivityTimer;
     #componentRuntime;
     #toolsExpanded = false;
     #thinkingVisible = true;
@@ -34,8 +50,12 @@ export class OwnedUiSessionShellRoot {
     constructor(view, cwd, handlers, startup = {}, agentDir, extensionRenderers = {
         getMessageRenderer: () => undefined,
         getToolDefinition: () => undefined,
-    }) {
+    }, sessionLayout = "pinned") {
         this.#view = view;
+        this.#customViewport = sessionLayout === "custom-viewport";
+        this.#submittedPromptComposer = this.#customViewport
+            ? { layout: submittedPromptLayout, compose: composeSubmittedPromptRows }
+            : undefined;
         this.#cwd = cwd;
         this.#extensionRenderers = extensionRenderers;
         this.#componentRuntime = handlers;
@@ -43,7 +63,7 @@ export class OwnedUiSessionShellRoot {
         this.resources = createPiShellLoadedResources(startup.resources ?? [], startup.expanded ?? false);
         this.#status = createPiShellStatus(view, handlers);
         this.#footer = createPiShellFooter(this.#viewWithExtensionStatuses(view), cwd);
-        this.#queued = createPiQueuedInputStatus(view.editor.queuedSubmissions);
+        this.#queued = createPiQueuedInputStatus(view.editor.queuedSubmissions, this.#customViewport ? "custom-viewport" : "pinned");
         this.editor = createPiShellEditor({
             ...handlers,
             cwd,
@@ -59,9 +79,16 @@ export class OwnedUiSessionShellRoot {
         this.#syncTranscript(view.transcript);
         // Colours come from the active theme, so rendered rows outlive their revision only
         // until the theme under them changes.
-        this.#themeUnsubscribe = onPiThemeChange(() => this.#renderedRows.clear());
+        this.#themeUnsubscribe = onPiThemeChange(() => {
+            this.#renderedRows.clear();
+            this.#documentLayouts.clear();
+        });
     }
     update(view) {
+        if (view.diagnostics.length !== this.#view.diagnostics.length
+            || view.diagnostics.some((diagnostic, index) => diagnostic.sequence !== this.#view.diagnostics[index]?.sequence)) {
+            this.#documentLayouts.clear();
+        }
         this.#view = view;
         this.#status.update(view);
         this.#footer.update(this.#viewWithExtensionStatuses(view));
@@ -80,7 +107,7 @@ export class OwnedUiSessionShellRoot {
         this.#blocksById.set(block.id, block);
         const component = this.#transcript.get(block.id);
         if (component === undefined) {
-            const created = createPiShellTranscriptComponent(block, this.#cwd, this.#extensionRenderers);
+            const created = createPiShellTranscriptComponent(block, this.#cwd, this.#extensionRenderers, this.#submittedPromptComposer);
             created.setExpanded(this.#toolsExpanded);
             this.#transcript.set(block.id, created);
             this.#transcriptOrder.push(block.id);
@@ -91,18 +118,307 @@ export class OwnedUiSessionShellRoot {
         // One chunk touches one block, and the updated component tracks its own dirtiness.
         // Invalidating the whole shell here would re-wrap the entire transcript per chunk.
         this.#renderedRows.delete(block.id);
+        this.#documentLayouts.clear();
     }
     render(width) {
+        if (!this.#customViewport)
+            return [...this.#renderDocument(width), ...this.#renderDock(width)];
+        const height = Math.max(0, this.#componentRuntime.getRows());
+        const dock = this.#renderDockLayout(width);
+        const availableWithoutStatus = Math.max(0, height - Math.min(height, dock.rowsWithoutStatus.length));
+        // Ordinary transcript content uses the full terminal width. The rail is an
+        // overlay, not a lost wrapping cell. Submitted prompts alone retain the
+        // intentional final gutter after their right-aligned timestamp.
+        const documentWidth = width;
+        let document = this.#renderDocumentLayout(documentWidth);
+        const statusRows = dock.statusRows;
+        // v2 pins Working only while the complete transcript still fits. Once the
+        // transcript overflows, status joins the scrollable document tail so it
+        // naturally leaves the screen when the user scrolls up.
+        // Pi presents pending messages before Working. Keep status in the dock while
+        // a queue exists so moving overflowing status into the document cannot
+        // reverse that semantic order; it returns to v2 scrolling once the queue clears.
+        const pinStatus = this.#view.editor.queuedSubmissions.length > 0
+            || document.rows.length + statusRows.length <= availableWithoutStatus;
+        const dockRows = pinStatus ? dock.rows : dock.rowsWithoutStatus;
+        if (!pinStatus)
+            document = { ...document, rows: [...document.rows, ...statusRows] };
+        this.#viewport.setConfig(this.#viewportConfig);
+        return this.#viewport.compose({
+            documentRows: document.rows,
+            dockRows,
+            promptAnchors: document.promptAnchors,
+            width,
+            height,
+            // Anchor above the stable editor/widget/footer group. Queued input,
+            // working states, and transient notifications may grow above it without
+            // moving the floating control up and down the terminal.
+            bottomControlRow: Math.max(0, height - Math.min(height, dock.stableBottomRows) - 1),
+            theme: {
+                // Match the v2 rail: a continuously dim track and an accent thumb at
+                // rest, thickening on hover/drag through the presentation glyph. Reset
+                // inherited text decorations so dim transcript rows cannot dull the
+                // thumb; the row background deliberately remains intact.
+                track: text => `${SCROLLBAR_CELL_RESET}${piTheme().fg("dim", text)}`,
+                thumb: text => `${SCROLLBAR_CELL_RESET}${piTheme().fg("accent", text)}`,
+                sticky: (text, hovered) => piTheme().bg(hovered ? "selectedBg" : "toolPendingBg", piTheme().fg("text", withoutTerminalBackground(text))),
+                quietSticky: text => `\u001b[2m${text.replace(/\u001b\[(?:0|22)m/g, "$&\u001b[2m")}\u001b[22m`,
+                bottomControl: (text, hovered) => piTheme().bg(hovered ? "selectedBg" : "toolPendingBg", piTheme().fg("text", text)),
+                // Selection paints only the familiar dark-blue background. Source
+                // foreground roles (including links, warnings, muted text, and bold
+                // intensity) remain exactly as rendered instead of being inverted.
+                selection: (line, from, to) => backgroundSgrSpan(line, from, to, "\u001b[48;2;38;79;120m", "\u001b[49m"),
+            },
+        }).rows;
+    }
+    setViewportConfig(config) {
+        if (config.scrollbarAppearance !== this.#viewportConfig.scrollbarAppearance)
+            this.#documentLayouts.clear();
+        this.#viewportConfig = config;
+        this.#viewport.setConfig(config);
+        this.#componentRuntime.requestRender();
+    }
+    resumeViewportFollowing() {
+        if (!this.#customViewport)
+            return;
+        this.#stopSelectionAutoScroll();
+        const selectionChanged = this.#viewport.clearSelection();
+        const scrolled = this.#viewport.scrollToEnd();
+        if (scrolled)
+            this.#scheduleViewportActivityExpiry();
+        if (scrolled || selectionChanged)
+            this.#componentRuntime.requestRender();
+    }
+    noteCompletedAssistantMessage() {
+        if (!this.#customViewport || !this.#viewport.noteNewMessage())
+            return;
+        this.#componentRuntime.requestRender();
+    }
+    resetViewport() {
+        if (this.#viewportActivityTimer !== undefined)
+            clearTimeout(this.#viewportActivityTimer);
+        this.#viewportActivityTimer = undefined;
+        this.#stopSelectionAutoScroll();
+        this.#viewport.reset();
+    }
+    clearViewportPointerState() {
+        if (this.#viewportActivityTimer !== undefined)
+            clearTimeout(this.#viewportActivityTimer);
+        this.#viewportActivityTimer = undefined;
+        this.#dragGrabOffset = null;
+        this.#dockPointerSuppressed = false;
+        this.#stopSelectionAutoScroll();
+        this.#viewport.clearSelection();
+        this.#viewport.clearTransient();
+    }
+    handleViewportPreInput(data, allowWheel = true, now = Date.now()) {
+        if (!this.#customViewport || this.#viewport.frame === null)
+            return { data, consumed: false };
+        if (data === "\u0003") {
+            const copyText = this.#viewport.selectedText();
+            if (copyText !== null && copyText.length > 0) {
+                this.#viewport.clearSelection();
+                this.#componentRuntime.requestRender();
+                return { data: "", consumed: true, copyText };
+            }
+        }
+        if (allowWheel && ALT_END_INPUTS.has(data) && !this.#viewport.followingEnd) {
+            this.#viewport.scrollToEnd(now);
+            this.#scheduleViewportActivityExpiry();
+            this.#componentRuntime.requestRender();
+            return { data: "", consumed: true };
+        }
+        if (allowWheel && ALT_HOME_INPUTS.has(data)) {
+            if (this.#viewport.scrollToPreviousPrompt(now)) {
+                this.#scheduleViewportActivityExpiry();
+                this.#componentRuntime.requestRender();
+            }
+            return { data: "", consumed: true };
+        }
+        const frame = this.#viewport.frame;
+        let repaint = false;
+        let activity = false;
+        const routed = routeMouseInput(data, event => {
+            const hits = frame.hits;
+            const overRail = hits.rail !== null
+                && event.column === hits.rail.column
+                && event.row >= hits.rail.rowStart
+                && event.row < hits.rail.rowStart + hits.rail.trackHeight;
+            const overSticky = hits.sticky !== null && event.row === hits.sticky.row && event.column <= hits.sticky.width;
+            const overBottom = hits.bottom !== null && event.row === hits.bottom.row
+                && event.column >= hits.bottom.columnStart && event.column <= hits.bottom.columnEnd;
+            if (event.kind === "motion") {
+                this.#viewport.setRailHovered(overRail);
+                this.#viewport.setStickyHovered(overSticky);
+                this.#viewport.setBottomHovered(overBottom);
+                repaint = true;
+                if (this.#dockPointerSuppressed)
+                    return true;
+                // Once a left-button selection starts, its release—not the button bits
+                // on an intermediate motion report—ends ownership. Some terminals emit
+                // no-button motion while busy frames are being coalesced; accepting it
+                // keeps the drag continuous instead of apparently freezing.
+                if (this.#viewport.selectionActive) {
+                    this.#viewport.extendSelection(event.column, event.row, now, false);
+                    this.#updateSelectionAutoScroll(event.column, event.row, hits.viewportHeight);
+                    activity = true;
+                    return true;
+                }
+                if (this.#dragGrabOffset !== null && hits.rail !== null) {
+                    const target = scrollForThumbRow(hits.rail.geometry, event.row - hits.rail.rowStart - this.#dragGrabOffset);
+                    this.#viewport.scrollTo(target, now);
+                    activity = true;
+                    return true;
+                }
+                return overRail || overSticky || overBottom;
+            }
+            if (event.kind === "wheel-up" || event.kind === "wheel-down") {
+                if (!allowWheel || event.row < 1 || event.row > hits.viewportHeight)
+                    return false;
+                const distance = scrollbarWheelRows(this.#viewportConfig.scrollbarSpeed);
+                this.#viewport.scrollBy(event.kind === "wheel-up" ? -distance : distance, now);
+                activity = true;
+                repaint = true;
+                return true;
+            }
+            if (event.kind === "press") {
+                if (event.button !== 0)
+                    return false;
+                this.#stopSelectionAutoScroll();
+                if (this.#viewport.clearSelection())
+                    repaint = true;
+                if (overBottom) {
+                    this.#viewport.scrollToEnd(now);
+                    activity = true;
+                    repaint = true;
+                    return true;
+                }
+                if (overSticky && hits.sticky !== null) {
+                    this.#viewport.scrollTo(hits.sticky.target, now);
+                    activity = true;
+                    repaint = true;
+                    return true;
+                }
+                if (overRail && hits.rail !== null) {
+                    const trackRow = event.row - hits.rail.rowStart;
+                    const geometry = hits.rail.geometry;
+                    if (trackRow >= geometry.thumbTop && trackRow < geometry.thumbTop + geometry.thumbHeight) {
+                        this.#dragGrabOffset = trackRow - geometry.thumbTop;
+                        this.#viewport.setRailDragging(true);
+                    }
+                    else {
+                        this.#viewport.scrollTo(scrollForTrackPage(geometry, trackRow, frame.scrollTop, hits.viewportHeight), now);
+                    }
+                    activity = true;
+                    repaint = true;
+                    return true;
+                }
+                if (event.row > hits.viewportHeight) {
+                    // Status, editor, widgets, and footer are controls rather than
+                    // transcript. Consume the complete drag so Pi's fullscreen fallback
+                    // selection cannot paint those rows.
+                    this.#dockPointerSuppressed = true;
+                    return true;
+                }
+                if (event.row >= 1 && event.row <= hits.viewportHeight && event.column <= frame.contentWidth) {
+                    this.#viewport.pressSelection(event.column, event.row, now);
+                    repaint = true;
+                    return true;
+                }
+                return false;
+            }
+            if (event.kind === "release") {
+                if (this.#viewport.releaseSelection()) {
+                    this.#stopSelectionAutoScroll();
+                    repaint = true;
+                    return true;
+                }
+                if (this.#dragGrabOffset !== null) {
+                    this.#dragGrabOffset = null;
+                    this.#viewport.setRailDragging(false);
+                    repaint = true;
+                    return true;
+                }
+                if (this.#dockPointerSuppressed) {
+                    this.#dockPointerSuppressed = false;
+                    return true;
+                }
+            }
+            return false;
+        });
+        if (activity)
+            this.#scheduleViewportActivityExpiry();
+        if (repaint)
+            this.#componentRuntime.requestRender();
+        return routed;
+    }
+    #updateSelectionAutoScroll(column, row, viewportHeight) {
+        const beyondEdge = row <= 1 || row > viewportHeight;
+        if (!beyondEdge) {
+            this.#stopSelectionAutoScroll();
+            return;
+        }
+        this.#selectionAutoScrollPointer = { column, row };
+        if (this.#selectionAutoScrollTimer !== undefined)
+            return;
+        this.#selectionAutoScrollTimer = setTimeout(() => this.#selectionAutoScrollTick(), SELECTION_AUTO_SCROLL_INTERVAL_MS);
+        this.#selectionAutoScrollTimer.unref?.();
+    }
+    #selectionAutoScrollTick() {
+        this.#selectionAutoScrollTimer = undefined;
+        const pointer = this.#selectionAutoScrollPointer;
+        if (pointer === undefined || !this.#viewport.selectionActive) {
+            this.#stopSelectionAutoScroll();
+            return;
+        }
+        const before = this.#viewport.scrollTop;
+        const rowsPerTick = scrollbarSelectionRows(this.#viewportConfig.scrollbarSpeed);
+        for (let row = 0; row < rowsPerTick; row += 1) {
+            const previous = this.#viewport.scrollTop;
+            this.#viewport.extendSelection(pointer.column, pointer.row);
+            if (this.#viewport.scrollTop === previous)
+                break;
+        }
+        if (this.#viewport.scrollTop === before) {
+            this.#stopSelectionAutoScroll();
+            return;
+        }
+        this.#componentRuntime.requestRender();
+        this.#scheduleViewportActivityExpiry();
+        this.#selectionAutoScrollTimer = setTimeout(() => this.#selectionAutoScrollTick(), SELECTION_AUTO_SCROLL_INTERVAL_MS);
+        this.#selectionAutoScrollTimer.unref?.();
+    }
+    #stopSelectionAutoScroll() {
+        if (this.#selectionAutoScrollTimer !== undefined)
+            clearTimeout(this.#selectionAutoScrollTimer);
+        this.#selectionAutoScrollTimer = undefined;
+        this.#selectionAutoScrollPointer = undefined;
+    }
+    #scheduleViewportActivityExpiry() {
+        if (this.#viewportActivityTimer !== undefined)
+            clearTimeout(this.#viewportActivityTimer);
+        this.#viewportActivityTimer = setTimeout(() => {
+            this.#viewportActivityTimer = undefined;
+            this.#componentRuntime.requestRender();
+        }, 925);
+        this.#viewportActivityTimer.unref?.();
+    }
+    #renderDock(width) {
+        return this.#renderDockLayout(width).rows;
+    }
+    #renderDockLayout(width) {
         const queued = this.#view.editor.queuedSubmissions.length === 0 ? [] : this.#queued.render(width);
-        return [
-            ...this.#renderDocument(width),
-            ...queued,
-            ...this.#renderStatus(width),
-            ...this.#renderWidgets("aboveEditor", width),
-            ...this.#inputSurface.render(width),
-            ...this.#renderWidgets("belowEditor", width),
-            ...this.#renderFooter(width),
-        ];
+        const statusRows = this.#renderStatus(width);
+        const aboveWidgets = this.#renderWidgets("aboveEditor", width);
+        const input = this.#inputSurface.render(width);
+        const belowWidgets = this.#renderWidgets("belowEditor", width);
+        const footer = this.#renderFooter(width);
+        return {
+            rows: [...queued, ...statusRows, ...aboveWidgets, ...input, ...belowWidgets, ...footer],
+            rowsWithoutStatus: [...queued, ...aboveWidgets, ...input, ...belowWidgets, ...footer],
+            statusRows,
+            stableBottomRows: aboveWidgets.length + input.length + belowWidgets.length + footer.length,
+        };
     }
     layoutRoot() {
         const document = layoutPort(width => this.#renderDocument(width), () => this.invalidate());
@@ -154,23 +470,66 @@ export class OwnedUiSessionShellRoot {
         };
     }
     #renderDocument(width) {
-        const transcript = this.#transcriptOrder.flatMap((id, index) => {
-            const block = this.#blocksById.get(id);
-            if (!this.#thinkingVisible && block?.kind === "thinking")
-                return [];
-            const rows = this.#blockRows(id, block, width);
-            if (index > 0 && block?.kind === "user")
-                return ["", ...rows];
-            return rows;
-        });
+        return this.#renderDocumentLayout(width).rows;
+    }
+    #renderDocumentLayout(width) {
+        // Extension headers may animate independently of transcript revisions, so
+        // only the stable built-in document participates in this frame cache.
+        const cached = this.#extensionHeader === null ? this.#documentLayouts.get(width) : undefined;
+        if (cached !== undefined)
+            return cached;
         const diagnostics = this.#view.diagnostics;
         const startupRows = diagnostics
             .filter(diagnostic => diagnostic.code === "engine-startup")
             .flatMap(diagnostic => renderPiShellStartupDiagnostic(diagnostic, width));
-        const packageUpdateRows = diagnostics
+        const resourceRows = this.#customViewport ? [] : [...this.resources.render(width)];
+        if (resourceRows.at(-1) === "")
+            resourceRows.pop();
+        const headerRows = this.#extensionHeader !== null
+            ? this.#extensionHeader.render(width)
+            : this.#customViewport ? [] : this.header.render(width);
+        const rows = [
+            ...startupRows,
+            ...headerRows,
+            ...resourceRows,
+        ];
+        const promptAnchors = [];
+        for (let index = 0; index < this.#transcriptOrder.length; index += 1) {
+            const id = this.#transcriptOrder[index];
+            const block = this.#blocksById.get(id);
+            if (!this.#thinkingVisible && block?.kind === "thinking")
+                continue;
+            const blockWidth = this.#customViewport
+                && block?.kind === "user"
+                && this.#viewportConfig.scrollbarAppearance !== "hidden"
+                && width > 1
+                ? width - 1
+                : width;
+            const blockRows = this.#blockRows(id, block, blockWidth);
+            if (block?.kind === "user") {
+                // The first natural prompt gets one breathing row at the document top.
+                // Once scrolling advances, the prompt itself reaches row zero and then
+                // becomes sticky there, so the spacer is never pinned with it.
+                if (this.#customViewport && index === 0)
+                    rows.push("");
+                else if (index > 0)
+                    rows.push("");
+            }
+            const firstRow = rows.length;
+            rows.push(...blockRows);
+            if (block?.kind === "user" && blockRows[0] !== undefined) {
+                promptAnchors.push({
+                    id: block.id,
+                    firstRow,
+                    lastRow: Math.max(firstRow, rows.length - 1),
+                    sourceRow: pinnedPromptSourceRow(block, blockRows[0], blockWidth),
+                });
+            }
+        }
+        rows.push(...diagnostics
             .filter(diagnostic => diagnostic.code === "package-updates")
-            .flatMap(diagnostic => renderPiShellPackageUpdateNotice(diagnostic.message.split("\n").filter(line => line.startsWith("- ")).map(line => line.slice(2)), width));
-        const diagnosticRows = diagnostics
+            .flatMap(diagnostic => renderPiShellPackageUpdateNotice(diagnostic.message.split("\n").filter(line => line.startsWith("- ")).map(line => line.slice(2)), width)));
+        rows.push(...diagnostics
             .filter(diagnostic => diagnostic.code !== "engine-startup" && diagnostic.code !== "package-updates")
             .slice(-3)
             .flatMap(diagnostic => renderPiShellTranscriptBlock({
@@ -181,18 +540,15 @@ export class OwnedUiSessionShellRoot {
             title: diagnostic.code,
             text: diagnostic.message,
             payload: {},
-        }, width, this.#cwd));
-        const resourceRows = [...this.resources.render(width)];
-        if (resourceRows.at(-1) === "")
-            resourceRows.pop();
-        return [
-            ...startupRows,
-            ...(this.#extensionHeader ?? this.header).render(width),
-            ...resourceRows,
-            ...transcript,
-            ...packageUpdateRows,
-            ...diagnosticRows,
-        ];
+        }, width, this.#cwd)));
+        const layout = { rows: Object.freeze(rows), promptAnchors: Object.freeze(promptAnchors) };
+        if (this.#extensionHeader === null) {
+            this.#documentLayouts.set(width, layout);
+            // The custom viewport commonly probes full width and reserved-rail width.
+            while (this.#documentLayouts.size > 2)
+                this.#documentLayouts.delete(this.#documentLayouts.keys().next().value);
+        }
+        return layout;
     }
     /**
      * Rows for one transcript block. A finalized block renders once for a given revision
@@ -206,11 +562,20 @@ export class OwnedUiSessionShellRoot {
             return [];
         if (block === undefined || block.status !== "finalized")
             return component.render(width);
-        const cached = this.#renderedRows.get(id);
-        if (cached && cached.width === width && cached.revision === block.revision)
+        let byWidth = this.#renderedRows.get(id);
+        const cached = byWidth?.get(width);
+        if (cached?.revision === block.revision)
             return cached.rows;
         const rows = component.render(width);
-        this.#renderedRows.set(id, { width, revision: block.revision, rows });
+        if (byWidth === undefined) {
+            byWidth = new Map();
+            this.#renderedRows.set(id, byWidth);
+        }
+        byWidth.set(width, { revision: block.revision, rows });
+        // Bare A1 probes full width before reserving the overflowing rail column;
+        // retain both widths without turning resize history into an unbounded cache.
+        while (byWidth.size > 2)
+            byWidth.delete(byWidth.keys().next().value);
         return rows;
     }
     transcriptComponent(id) {
@@ -222,6 +587,7 @@ export class OwnedUiSessionShellRoot {
             && this.#transcriptOrder.at(-1) === previousId
             && this.#workflowStatusAnchors.get(previousId) === this.#view.transcript.length) {
             this.#workflowStatusMessages.set(previousId, message);
+            this.#documentLayouts.clear();
             this.invalidate();
             return;
         }
@@ -313,6 +679,7 @@ export class OwnedUiSessionShellRoot {
     }
     toggleThinkingVisibility() {
         this.#thinkingVisible = !this.#thinkingVisible;
+        this.#documentLayouts.clear();
         this.invalidate();
     }
     get toolsExpanded() {
@@ -335,6 +702,7 @@ export class OwnedUiSessionShellRoot {
         if (this.#extensionHeader !== component)
             this.#extensionHeader?.dispose?.();
         this.#extensionHeader = component;
+        this.#documentLayouts.clear();
         this.invalidate();
     }
     setExtensionFooter(component) {
@@ -366,6 +734,7 @@ export class OwnedUiSessionShellRoot {
         this.#workflowStatusMessages.clear();
         this.#transcriptOrder = this.#transcriptOrder.filter(id => !id.startsWith("workflow-status-"));
         this.#lastWorkflowStatusId = undefined;
+        this.#documentLayouts.clear();
         this.invalidate();
     }
     resetExtensionUi() {
@@ -382,6 +751,7 @@ export class OwnedUiSessionShellRoot {
         this.#footer.update(this.#viewWithExtensionStatuses(this.#view));
         // An extension renderer may have drawn transcript blocks that are now unrendered by it.
         this.#renderedRows.clear();
+        this.#documentLayouts.clear();
         this.invalidate();
     }
     addExtensionNotification(message, type) {
@@ -401,6 +771,9 @@ export class OwnedUiSessionShellRoot {
             onBranchChange: () => () => { },
         };
     }
+    usesDefaultInputSurface() {
+        return this.#inputSurface === this.editor;
+    }
     setInputSurface(component, disposePrevious = true) {
         const next = component ?? this.editor;
         if (next === this.#inputSurface)
@@ -432,6 +805,7 @@ export class OwnedUiSessionShellRoot {
         this.#inputSurface.setFocused?.(focused);
     }
     dispose() {
+        this.clearViewportPointerState();
         this.#themeUnsubscribe();
         this.header.dispose?.();
         this.resources.dispose?.();
@@ -439,6 +813,7 @@ export class OwnedUiSessionShellRoot {
             component.dispose?.();
         this.#transcript.clear();
         this.#renderedRows.clear();
+        this.#documentLayouts.clear();
         if (this.#inputSurface !== this.editor)
             this.#inputSurface.dispose?.();
         this.#extensionHeader?.dispose?.();
@@ -452,6 +827,13 @@ export class OwnedUiSessionShellRoot {
         this.#queued.dispose?.();
     }
     #syncTranscript(blocks) {
+        const previousIds = this.#transcriptOrder.filter(id => !id.startsWith("workflow-status-"));
+        const transcriptChanged = previousIds.length !== blocks.length || blocks.some((block, index) => {
+            const previous = this.#blocksById.get(block.id);
+            return previousIds[index] !== block.id || previous?.revision !== block.revision;
+        });
+        if (transcriptChanged)
+            this.#documentLayouts.clear();
         this.#blocksById.clear();
         for (const block of blocks)
             this.#blocksById.set(block.id, block);
@@ -466,7 +848,7 @@ export class OwnedUiSessionShellRoot {
         for (const block of blocks) {
             const component = this.#transcript.get(block.id);
             if (component === undefined) {
-                const created = createPiShellTranscriptComponent(block, this.#cwd, this.#extensionRenderers);
+                const created = createPiShellTranscriptComponent(block, this.#cwd, this.#extensionRenderers, this.#submittedPromptComposer);
                 created.setExpanded(this.#toolsExpanded);
                 this.#transcript.set(block.id, created);
             }
@@ -508,6 +890,7 @@ export class OwnedUiSessionShellRoot {
         this.#transcript.set(id, component);
         this.#workflowStatusAnchors.set(id, this.#view.transcript.length);
         this.#transcriptOrder.push(id);
+        this.#documentLayouts.clear();
         this.invalidate();
         return id;
     }
@@ -555,9 +938,35 @@ export class OwnedUiSessionShellRoot {
             component.setExpanded(expanded);
         // Expansion changes what a block draws without changing its revision.
         this.#renderedRows.clear();
+        this.#documentLayouts.clear();
         this.invalidate();
     }
 }
+const SELECTION_AUTO_SCROLL_INTERVAL_MS = 30;
+const ALT_END_INPUTS = new Set(["\u001b[1;3F", "\u001b[4;3~", "\u001b[8;3~"]);
+const ALT_HOME_INPUTS = new Set(["\u001b[1;3H", "\u001b[1;3~", "\u001b[7;3~"]);
+const SCROLLBAR_CELL_RESET = "\u001b[22;23;24;25;27;28;29;39;54;55m";
+const TERMINAL_BACKGROUND = /\u001b\[(?:4[0-9]|10[0-7]|48(?:[;:][0-9;:]*)?)m/g;
+/** Repaint a source prompt with viewport chrome while preserving text, links, and foreground roles. */
+function withoutTerminalBackground(text) {
+    return text.replace(TERMINAL_BACKGROUND, "");
+}
+/** A pinned timestamp is content now, not secondary transcript metadata. */
+function pinnedPromptSourceRow(block, sourceRow, width) {
+    if (typeof block.payload !== "object" || block.payload === null)
+        return sourceRow;
+    const value = block.payload.timestamp;
+    if (typeof value !== "number" || !Number.isFinite(value))
+        return sourceRow;
+    const timestamp = formatSubmittedPromptTime(value);
+    if (timestamp === null || submittedPromptLayout(width, value).timestamp === null)
+        return sourceRow;
+    const rowWidth = displayWidth(sourceRow);
+    const timestampWidth = displayWidth(timestamp);
+    if (rowWidth < timestampWidth)
+        return sourceRow;
+    return overlaySpan(sourceRow, rowWidth - timestampWidth, rowWidth, piTheme().fg("userMessageText", timestamp));
+}
 function layoutPort(render, invalidate, handleInput) {
     return {
         render,