@timurproko/a1 0.2.7-dev.1252 → 0.2.7-dev.1264

package/dist/app/session-shell/session-shell-root.js

@@ -1,14 +1,8 @@
-import { ImageAttachmentError } from "../../contracts/owned-ui/index.js";
 import { promptArrow } from "../../ui/components/prompt-input.js";
 import { composeSubmittedPromptRows, submittedPromptLayout, } from "../../ui/components/submitted-prompt.js";
 import { nativeHyperlinkStyle } from "../../ui/components/spans.js";
 import { paintTextSelection } from "../../ui/components/text-selection.js";
 import { progressStatusFrame, progressStatusText } from "../../ui/components/progress-status.js";
-import { createPiQueuedInputStatus, createPiShellFooter, createPiShellHeader, createPiShellLoadedResources, createPiShellStatus, } from "../../integrations/pi/components/shell-footer-status.js";
-import { createPiShellTranscriptComponent, } from "../../integrations/pi/components/shell-presenters-transcript.js";
-import { onPiThemeChange, piTheme } from "../../integrations/pi/components/upstream/theme/theme.js";
-import { piShellTruncateToWidth, } from "../../integrations/pi/components/shell-shared-facade.js";
-import {} from "../../integrations/pi/tui-runtime/input-presentation-coordinator.js";
 import { PromptChipStore } from "./prompt-chips.js";
 import { SessionViewportController } from "./session-viewport-controller.js";
 import { createShellEditor } from "./shell-editor-factory.js";
@@ -18,14 +12,15 @@ import { WorkflowOutput } from "./workflow-output.js";
 import { InputSurfaceSwitch } from "./input-surface-switch.js";
 import { PinnedLayout } from "./shell-layout.js";
 import { ViewportLayout } from "./viewport-layout.js";
-import { nativeTranscriptLinkColor, TranscriptDocument } from "./transcript-document.js";
+import { transcriptLinkColor, TranscriptDocument } from "./transcript-document.js";
 /** Composes session state into the owned transcript, viewport, editor, and dock. */
 export class OwnedUiSessionShellRoot {
     editor;
     header;
     resources;
     #cwd;
-    #document;
+    /** The transcript's semantic rows, caches, and engine-backed block renderers. */
+    transcript;
     #themeUnsubscribe;
     #view;
     #status;
@@ -33,11 +28,11 @@ export class OwnedUiSessionShellRoot {
     #queued;
     #extensionRenderers;
     #imageAssets;
-    #promptChips;
+    promptChips;
     #pasteDiagnosticId = 0;
     #customViewport;
     #submittedPromptComposer;
-    #viewportController;
+    viewport;
     #onPromptSuggestionEligibilityChanged;
     #componentRuntime;
     #toolsExpanded = false;
@@ -47,11 +42,13 @@ export class OwnedUiSessionShellRoot {
     #showImages = true;
     #imageWidthCells = 80;
     #outputPad = 1;
-    #workflowOutput;
+    /** Workflow results, messages, and status lines appended to the transcript. */
+    workflow;
     #input;
     #layout;
     #extensions = new ExtensionSurface();
-    #dockChrome;
+    /** The dock's notices, copy acknowledgement, and release banner. */
+    chrome;
     #imageSubmissionsSending = 0;
     constructor(view, cwd, handlers, startup = {}, agentDir, extensionRenderers = {
         getMessageRenderer: () => undefined,
@@ -60,57 +57,57 @@ export class OwnedUiSessionShellRoot {
     }, sessionLayout = "pinned", imageAssets) {
         this.#view = view;
         this.#customViewport = sessionLayout === "custom-viewport";
-        this.#promptChips = new PromptChipStore({ isolated: this.#customViewport,
+        this.promptChips = new PromptChipStore({ isolated: this.#customViewport,
             ...(handlers.pasteDiagnostics === undefined ? {} : { onEvent: handlers.pasteDiagnostics }),
             ...(handlers.pastePreparation === undefined ? {} : { preparation: handlers.pastePreparation }),
             ...(handlers.promptImageLimit === undefined ? {} : { imageLimit: handlers.promptImageLimit }) });
-        this.#submittedPromptComposer = this.#customViewport ? this.#createSubmittedPromptComposer() : undefined;
+        this.#submittedPromptComposer = this.#customViewport ? this.#createSubmittedPromptComposer(handlers.presentation.theme) : undefined;
         this.#cwd = cwd;
-        this.#document = this.#createDocument(cwd);
+        this.transcript = this.#createDocument(cwd, handlers.presentation.theme, handlers.components);
         this.#extensionRenderers = extensionRenderers;
         this.#imageAssets = imageAssets;
         this.#componentRuntime = handlers;
         this.#onPromptSuggestionEligibilityChanged = handlers.onPromptSuggestionEligibilityChanged;
-        this.header = createPiShellHeader({
+        this.header = handlers.components.chrome.header({
             ...startup,
             ...(this.#customViewport ? { getKeybindings: () => this.editor.keybindingConfig() } : {}),
         });
-        this.resources = createPiShellLoadedResources(startup.resources ?? [], startup.expanded ?? false);
-        this.#status = createPiShellStatus(view, {
+        this.resources = handlers.components.chrome.loadedResources(startup.resources ?? [], startup.expanded ?? false);
+        this.#status = handlers.components.chrome.status(view, {
             text: (message, mode) => progressStatusText(message, mode === "custom-viewport" ? "…" : "..."),
             frame: progressStatusFrame,
         }, handlers);
         this.#status.setProgressPresentation(this.#customViewport ? "custom-viewport" : "pinned");
-        this.#footer = createPiShellFooter(this.#extensions.withStatuses(view), cwd, this.#customViewport ? "a1" : "pi", () => this.#footerLevel);
+        this.#footer = handlers.components.chrome.footer(this.#extensions.withStatuses(view), cwd, this.#customViewport ? "a1" : "pi", () => this.#footerLevel);
         this.editor = createShellEditor({
-            handlers,
+            handlers, theme: handlers.presentation.theme, components: handlers.components,
             customViewport: this.#customViewport,
             cwd,
             ...(agentDir === undefined ? {} : { agentDir }),
-            promptChips: this.#promptChips,
-            editorPointerSelecting: () => this.#viewportController.editorPointerSelecting,
+            promptChips: this.promptChips,
+            editorPointerSelecting: () => this.viewport.editorPointerSelecting,
             nextPasteDiagnosticRequest: () => --this.#pasteDiagnosticId,
             toggleToolsExpanded: () => this.#setToolsExpanded(!this.#toolsExpanded),
         });
-        this.#queued = createPiQueuedInputStatus(view.editor.queuedSubmissions, this.#customViewport ? "custom-viewport" : "pinned", this.#customViewport ? () => this.editor.keybindingConfig() : undefined);
-        this.#viewportController = new SessionViewportController({
+        this.#queued = handlers.components.chrome.queuedInput(view.editor.queuedSubmissions, this.#customViewport ? "custom-viewport" : "pinned", this.#customViewport ? () => this.editor.keybindingConfig() : undefined);
+        this.viewport = new SessionViewportController({
             enabled: this.#customViewport,
             editor: this.editor,
             requestRender: force => this.#componentRuntime.requestRender(force),
             requestHyperlinkCleanup: rows => handlers.requestHyperlinkCleanup?.(rows),
-            hasEditorLinks: () => this.#promptChips.hyperlinkRanges(this.editor.getText()).length > 0,
+            hasEditorLinks: () => this.promptChips.hyperlinkRanges(this.editor.getText()).length > 0,
             ...(handlers.pasteDiagnostics === undefined ? {} : { pasteDiagnostics: handlers.pasteDiagnostics }),
             nextPasteDiagnosticRequest: () => --this.#pasteDiagnosticId,
         });
-        this.#dockChrome = new DockChrome({
+        this.chrome = new DockChrome({ theme: handlers.presentation.theme, outputPad: handlers.presentation.pinnedOutputPad, components: handlers.components,
             invalidateChrome: () => this.#invalidateChrome(),
             requestRender: () => this.#componentRuntime.requestRender(),
-            viewport: this.#viewportController,
+            viewport: this.viewport,
         });
-        this.#workflowOutput = new WorkflowOutput({
-            customViewport: this.#customViewport,
-            document: this.#document,
-            dock: this.#dockChrome,
+        this.workflow = new WorkflowOutput({
+            customViewport: this.#customViewport, components: handlers.components,
+            document: this.transcript,
+            dock: this.chrome,
             transcriptLength: () => this.#view.transcript.length,
             outputPad: () => this.#outputPad,
             hotkeysPresentation: () => this.hotkeysPresentation(),
@@ -119,26 +116,27 @@ export class OwnedUiSessionShellRoot {
         });
         this.editor.setThinkingLevel(view.thinkingLevel);
         this.#input = new InputSurfaceSwitch(this.editor, {
-            dockInputReuse: this.#customViewport && (handlers.enableDockInputReuse ?? true),
-            viewport: this.#viewportController,
+            dockInputReuse: this.#customViewport && (handlers.enableDockInputReuse ?? true), classifyInput: handlers.presentation.terminalRuntime.classifyInput,
+            viewport: this.viewport,
             ...(handlers.onInputSurfaceChanged === undefined ? {} : { onChanged: handlers.onInputSurfaceChanged }),
         });
-        this.#layout = this.#createLayout(handlers.onViewportFrame);
+        this.#layout = this.#createLayout(handlers.onViewportFrame, createViewportTheme(handlers.presentation.theme));
         for (const block of view.transcript) {
             if (block.kind === "user")
                 this.editor.addToHistory(block.text);
         }
-        this.#document.sync(view.transcript);
+        this.transcript.sync(view.transcript);
         // Invariant: rendered rows expire when
         // their active theme changes.
-        this.#themeUnsubscribe = onPiThemeChange(() => {
+        this.#themeUnsubscribe = handlers.presentation.theme.onChange(() => {
             this.invalidate();
             this.#componentRuntime.requestRender(true);
         });
     }
     // Invariant: the document reads the shell's chrome lazily, so it may be built before the header and viewport.
-    #createDocument(cwd) {
+    #createDocument(cwd, theme, components) {
         return new TranscriptDocument({
+            theme, components,
             customViewport: this.#customViewport,
             cwd,
             mount: block => this.#mountTranscript(block),
@@ -153,33 +151,34 @@ export class OwnedUiSessionShellRoot {
         });
     }
     // Invariant: one layout per root; the render path never consults the layout mode again.
-    #createLayout(onFrame) {
+    #createLayout(onFrame, theme) {
         const ports = {
-            viewport: this.#viewportController,
+            viewport: this.viewport,
             input: this.#input,
             editor: this.editor,
-            promptChips: this.#promptChips,
-            dockChrome: this.#dockChrome,
-            theme: VIEWPORT_THEME,
+            promptChips: this.promptChips,
+            dockChrome: this.chrome,
+            theme,
             ...(onFrame === undefined ? {} : { onFrame }),
             rows: () => this.#componentRuntime.getRows(),
             dock: width => this.#renderDockLayout(width),
-            document: width => this.#document.layout(width),
+            document: width => this.transcript.layout(width),
             queued: width => this.#renderQueued(width),
             liveStatus: width => this.#renderStatus(width),
             diagnostics: () => this.#view.diagnostics,
         };
         return this.#customViewport ? new ViewportLayout(ports) : new PinnedLayout(ports);
     }
-    #createSubmittedPromptComposer() {
+    #createSubmittedPromptComposer(theme) {
+        const linkColor = transcriptLinkColor(theme);
         return {
             layout: width => submittedPromptLayout(width),
-            compose: (rows, width, style) => composeSubmittedPromptRows(rows, width, { ...style, prefix: text => promptArrow(text, piTheme()) }).map(row => nativeHyperlinkStyle(row, nativeTranscriptLinkColor)),
+            compose: (rows, width, style) => composeSubmittedPromptRows(rows, width, { ...style, prefix: text => promptArrow(text, theme.current()) }).map(row => nativeHyperlinkStyle(row, linkColor)),
         };
     }
     setEditorPaddingX(padding) {
         this.editor.setPaddingX(padding);
-        this.#document.invalidate("editor-padding");
+        this.transcript.invalidate("editor-padding");
     }
     setAutocompleteMaxVisible(maxVisible) {
         this.editor.setAutocompleteMaxVisible(maxVisible);
@@ -189,7 +188,7 @@ export class OwnedUiSessionShellRoot {
             return;
         this.#outputPad = padding;
         this.#status.setOutputPad(padding);
-        for (const component of this.#document.components())
+        for (const component of this.transcript.components())
             component.setOutputPad(padding);
         this.#invalidateTranscriptPresentation();
     }
@@ -197,7 +196,7 @@ export class OwnedUiSessionShellRoot {
         if (this.#thinkingVisible === !hidden)
             return;
         this.#thinkingVisible = !hidden;
-        for (const component of this.#document.components())
+        for (const component of this.transcript.components())
             component.setHideThinkingBlock(hidden);
         this.#invalidateTranscriptPresentation();
     }
@@ -205,7 +204,7 @@ export class OwnedUiSessionShellRoot {
         if (this.#mermaidRenderingMode === mode)
             return;
         this.#mermaidRenderingMode = mode;
-        for (const component of this.#document.components())
+        for (const component of this.transcript.components())
             component.setMermaidRenderingMode(mode);
         this.#invalidateTranscriptPresentation();
     }
@@ -214,44 +213,26 @@ export class OwnedUiSessionShellRoot {
             return;
         this.#showImages = showImages;
         this.#imageWidthCells = imageWidthCells;
-        for (const component of this.#document.components())
+        for (const component of this.transcript.components())
             component.setImagePresentation(showImages, imageWidthCells);
         this.#invalidateTranscriptPresentation();
     }
-    prepareHistoryText(text) {
-        return this.#promptChips.prepareHistoryText(text);
-    }
-    omitUnsentPromptImages(text) {
-        return this.#promptChips.omitUnsentImages(text);
-    }
-    rehydrateHistoryText(text, resolveImage) {
-        return this.#promptChips.rehydrateHistoryText(text, resolveImage);
-    }
-    imageChipAttachmentsFromEditor(text) {
-        return this.#promptChips.imageChipAttachments(text);
-    }
-    preparePromptSubmission(text) {
-        return this.#promptChips.prepareSubmission(text);
-    }
     reconcilePromptImageLimitNotice(text = this.editor.getText()) {
-        if (this.#dockChrome.notice?.errorCode !== "image-count" || !this.#promptChips.imageLimitState(text).corrected)
+        if (this.chrome.notice?.errorCode !== "image-count" || !this.promptChips.imageLimitState(text).corrected)
             return false;
-        this.dismissNotice();
+        this.chrome.dismissNotice();
         return true;
     }
-    hasPendingPastes(text) { return this.#promptChips.hasPending(text); }
     waitForPromptPastes(text, signal) {
-        return this.#promptChips.waitForPastes(text, signal, () => this.editor.getText());
+        return this.promptChips.waitForPastes(text, signal, () => this.editor.getText());
     }
     resetPendingPastes() {
         this.editor.cancelPendingPastes?.();
-        this.editor.setText(this.#promptChips.resetPastes(this.editor.getText()));
+        this.editor.setText(this.promptChips.resetPastes(this.editor.getText()));
     }
-    /** Forks the spare paste helper so the first paste of the session takes a live child. */
-    warmPastePreparation() { this.#promptChips.warm(); }
     disposePendingPastes() {
         this.resetPendingPastes();
-        return this.#promptChips.dispose();
+        return this.promptChips.dispose();
     }
     promptSuggestionPrepareBlockReason() {
         if (!this.usesDefaultInputSurface())
@@ -262,7 +243,6 @@ export class OwnedUiSessionShellRoot {
             return "draft";
         return null;
     }
-    canPreparePromptSuggestion() { return this.promptSuggestionPrepareBlockReason() === null; }
     promptSuggestionPresentationBlockReason() {
         const reason = this.promptSuggestionPrepareBlockReason();
         if (reason !== null)
@@ -280,14 +260,14 @@ export class OwnedUiSessionShellRoot {
         const becameReady = this.#view.lifecycle !== "ready" && view.lifecycle === "ready";
         if (view.diagnostics.length !== this.#view.diagnostics.length
             || view.diagnostics.some((diagnostic, index) => diagnostic.sequence !== this.#view.diagnostics[index]?.sequence)) {
-            this.#document.invalidate("diagnostics");
+            this.transcript.invalidate("diagnostics");
         }
         const promptAccepted = this.#view.lifecycle !== "busy" && view.lifecycle === "busy";
         this.#view = view;
         // Invariant: the idle new-session confirmation yields to the first truthful live status;
         // ordinary dock notices deliberately remain visible below Working during a run.
-        if (promptAccepted && this.#dockChrome.notice?.kind === "new-session")
-            this.#dockChrome.forgetNotice();
+        if (promptAccepted && this.chrome.notice?.kind === "new-session")
+            this.chrome.forgetNotice();
         if (promptAccepted && this.#imageSubmissionsSending > 0) {
             this.#imageSubmissionsSending = 0;
             this.#syncWorkingOverride();
@@ -295,7 +275,7 @@ export class OwnedUiSessionShellRoot {
         this.#status.update(view);
         this.#footer.update(this.#extensions.withStatuses(view));
         this.#queued.update(view.editor.queuedSubmissions);
-        this.#document.sync(view.transcript);
+        this.transcript.sync(view.transcript);
         this.editor.setSubmitEnabled(view.lifecycle !== "stopping" && view.lifecycle !== "stopped" && view.lifecycle !== "failed");
         this.editor.setThinkingLevel(view.thinkingLevel);
         // Performance: semantic updates already invalidate affected transcript blocks. Chrome is a separate authority.
@@ -303,23 +283,15 @@ export class OwnedUiSessionShellRoot {
         if (becameReady)
             this.#onPromptSuggestionEligibilityChanged?.();
     }
-    /**
-     * Applies one block: its component is created or updated in place and the order grows
-     * only when the block is new. A streamed chunk costs one component update rather than a
-     * walk of the whole transcript.
-     */
-    applyTranscriptBlock(block) {
-        this.#document.apply(block);
-    }
     #mountTranscript(block) {
         // Invariant: the notice answers the reader's last command, so only their next prompt or
         // shell command retires it; assistant, tool, and compaction blocks streaming in keep it.
         if (block.kind === "user" || block.kind === "bash")
-            this.dismissNotice();
-        const created = createPiShellTranscriptComponent(block, this.#cwd, this.#extensionRenderers, this.#submittedPromptComposer, this.#outputPad, !this.#thinkingVisible, this.#mermaidRenderingMode, this.#showImages, this.#imageWidthCells, this.#imageAssets, { ...this.#componentRuntime, changed: () => {
-                if (this.#document.component(block.id) !== created)
+            this.chrome.dismissNotice();
+        const created = this.#componentRuntime.components.transcript.component(block, this.#cwd, this.#extensionRenderers, this.#submittedPromptComposer, this.#outputPad, !this.#thinkingVisible, this.#mermaidRenderingMode, this.#showImages, this.#imageWidthCells, this.#imageAssets, { ...this.#componentRuntime, changed: () => {
+                if (this.transcript.component(block.id) !== created)
                     return;
-                this.#document.blockChanged(block.id);
+                this.transcript.blockChanged(block.id);
                 this.#layout.invalidate();
                 this.#input.clearDockInputCandidate();
                 this.#componentRuntime.requestRender();
@@ -331,18 +303,18 @@ export class OwnedUiSessionShellRoot {
         return this.#layout.render(width);
     }
     viewportFrameDescriptor() {
-        return this.#viewportController.frame?.descriptor ?? null;
+        return this.viewport.frame?.descriptor ?? null;
     }
     /** Read-only, payload-free evidence; observing a pending frame must never render or repair it. */
     viewportPresentationEvidence() {
-        const frame = this.#viewportController.frame;
+        const frame = this.viewport.frame;
         const snapshot = this.#layout.composed();
         return {
             candidate: this.#input.dockInputCandidate,
             candidateRevision: this.#input.dockInputCandidate ? this.#input.dockInputRevision ?? null : null,
-            currentRevision: this.#viewportController.presentationRevision,
+            currentRevision: this.viewport.presentationRevision,
             composedRevision: snapshot?.viewportRevision ?? null,
-            currentPointer: this.#viewportController.pointerPosition ?? null,
+            currentPointer: this.viewport.pointerPosition ?? null,
             composedPointer: snapshot?.pointerPosition ?? null,
             frameId: frame?.descriptor.frameId ?? null,
             bottom: frame?.hits.bottom ?? null,
@@ -354,53 +326,28 @@ export class OwnedUiSessionShellRoot {
     }
     /** Visible non-persistent Steering, alignment, and Working rows, for rendering evidence. */
     viewportTransientTailRowCount() {
-        return this.#viewportController.frame?.hits.transientTail.length ?? 0;
+        return this.viewport.frame?.hits.transientTail.length ?? 0;
     }
     hasActiveSelection() {
-        return this.#viewportController.hasSelection || this.editor.hasSelection();
+        return this.viewport.hasSelection || this.editor.hasSelection();
     }
     setViewportConfig(config) {
-        if (this.#viewportController.setConfig(config)) {
-            this.#document.invalidate("viewport-config");
+        if (this.viewport.setConfig(config)) {
+            this.transcript.invalidate("viewport-config");
             this.#layout.invalidate();
         }
     }
-    setFullscreenCopyOnSelect(enabled) {
-        this.#viewportController.setCopyOnSelect(enabled);
-    }
-    showCopyAcknowledgement(message) {
-        this.#dockChrome.showCopyAcknowledgement(message);
-    }
-    resumeViewportFollowing() {
-        this.#viewportController.resumeFollowing();
-    }
-    noteCompletedAssistantMessage() {
-        this.#viewportController.noteCompletedAssistantMessage();
-    }
-    /** A new session binding owns new mounts even when it reuses semantic invocation ids. */
-    resetTranscript() {
-        this.#document.reset();
-    }
-    resetViewport() {
-        this.#viewportController.reset();
-    }
-    clearViewportPointerState() {
-        this.#viewportController.clearPointerState();
-    }
-    setViewportOverlaySurfaces(surfaces) {
-        this.#viewportController.setOverlaySurfaces(surfaces);
-    }
     viewportInputGeometryReady(width, height) {
-        const frame = this.#viewportController.frame;
-        return this.#viewportController.inputGeometryReady && frame?.descriptor.width === width && frame.descriptor.height === height;
+        const frame = this.viewport.frame;
+        return this.viewport.inputGeometryReady && frame?.descriptor.width === width && frame.descriptor.height === height;
     }
     handleViewportPreInput(data, allowWheel = true, now = Date.now(), editorActive = this.usesDefaultInputSurface()) {
-        return this.#viewportController.handlePreInput(data, allowWheel, now, editorActive);
+        return this.viewport.handlePreInput(data, allowWheel, now, editorActive);
     }
     #renderDockLayout(width) {
         const queued = this.#customViewport ? [] : this.#renderQueued(width);
         const statusRows = this.#customViewport ? this.#status.renderDock(width) : this.#renderStatus(width);
-        const noticeRows = this.#dockChrome.renderNotice(width, this.#outputPad);
+        const noticeRows = this.chrome.renderNotice(width, this.#outputPad);
         const transientRows = [...queued, ...statusRows, ...noticeRows];
         const messageStart = queued.length;
         const copyableMessageRows = Array.from({ length: statusRows.length + noticeRows.length }, (_value, index) => ({ row: messageStart + index }));
@@ -420,9 +367,6 @@ export class OwnedUiSessionShellRoot {
             copyableMessageRows,
         };
     }
-    dismissNotice() {
-        this.#dockChrome.dismissNotice();
-    }
     #renderQueued(width) {
         return this.#view.editor.queuedSubmissions.length === 0 ? [] : this.#queued.render(width);
     }
@@ -439,22 +383,7 @@ export class OwnedUiSessionShellRoot {
         };
     }
     #renderDocument(width) {
-        return this.#document.layout(width).rows;
-    }
-    transcriptComponent(id) {
-        return this.#document.component(id);
-    }
-    exitTranscript(width) {
-        return this.#document.exitTranscript(width);
-    }
-    appendWorkflowStatus(message) {
-        this.#workflowOutput.appendStatus(message);
-    }
-    appendWorkflowMessage(message, errorCode) {
-        this.#workflowOutput.appendMessage(message, errorCode);
-    }
-    appendWorkflowResult(result, errorCode) {
-        this.#workflowOutput.appendResult(result, errorCode);
+        return this.transcript.layout(width).rows;
     }
     toggleThinkingVisibility() {
         this.setHideThinkingBlock(this.#thinkingVisible);
@@ -471,7 +400,7 @@ export class OwnedUiSessionShellRoot {
     }
     setExtensionHeader(component) {
         this.#extensions.replaceHeader(component);
-        this.#document.invalidate("extension-header");
+        this.transcript.invalidate("extension-header");
         this.invalidate();
     }
     setExtensionFooter(component) {
@@ -516,9 +445,9 @@ export class OwnedUiSessionShellRoot {
         };
     }
     resetWorkflowPresentation() {
-        this.#dockChrome.forgetNotice();
-        this.#dockChrome.clearCopyAcknowledgement(false);
-        this.#workflowOutput.reset();
+        this.chrome.forgetNotice();
+        this.chrome.clearCopyAcknowledgement(false);
+        this.workflow.reset();
         this.invalidate();
     }
     resetExtensionUi() {
@@ -526,15 +455,15 @@ export class OwnedUiSessionShellRoot {
         this.#syncWorkingOverride();
         this.#footer.update(this.#extensions.withStatuses(this.#view));
         // Invariant: an extension renderer may have drawn transcript blocks that are now unrendered by it.
-        this.#document.invalidate("extension-renderers");
+        this.transcript.invalidate("extension-renderers");
         this.invalidate();
     }
     addExtensionNotification(message, type) {
         if (type === "info") {
-            this.appendWorkflowStatus(message);
+            this.workflow.appendStatus(message);
             return;
         }
-        this.appendWorkflowMessage({ kind: type, message });
+        this.workflow.appendMessage({ kind: type, message });
     }
     extensionFooterData() {
         return {
@@ -554,7 +483,7 @@ export class OwnedUiSessionShellRoot {
         return this.#layout.compositions();
     }
     transcriptRenderCount() {
-        return this.#document.renderCount;
+        return this.transcript.renderCount;
     }
     setFooterLevel(visible) { this.#footerLevel = visible; }
     setInputSurface(component, disposePrevious = true, coordination = "owned") {
@@ -565,7 +494,7 @@ export class OwnedUiSessionShellRoot {
         this.#input.handleInput(data);
     }
     invalidate() {
-        this.#document.invalidate("repaint");
+        this.transcript.invalidate("repaint");
         this.#invalidateChrome();
     }
     #invalidateChrome() {
@@ -585,12 +514,12 @@ export class OwnedUiSessionShellRoot {
             this.#onPromptSuggestionEligibilityChanged?.();
     }
     dispose() {
-        this.#dockChrome.clearCopyAcknowledgement(false);
-        this.clearViewportPointerState();
+        this.chrome.clearCopyAcknowledgement(false);
+        this.viewport.clearPointerState();
         this.#themeUnsubscribe();
         this.header.dispose?.();
         this.resources.dispose?.();
-        this.#document.dispose();
+        this.transcript.dispose();
         this.#layout.invalidate();
         this.#input.dispose();
         this.#extensions.dispose();
@@ -600,7 +529,7 @@ export class OwnedUiSessionShellRoot {
         this.#queued.dispose?.();
     }
     #invalidateTranscriptPresentation() {
-        this.#document.invalidate("block-presentation");
+        this.transcript.invalidate("block-presentation");
         this.invalidate();
     }
     #renderStatus(width) {
@@ -611,16 +540,16 @@ export class OwnedUiSessionShellRoot {
         if (!this.#customViewport)
             return footer.render(width);
         width = Math.max(0, width - 2);
-        return footer.render(width).map(row => ` ${piShellTruncateToWidth(row, width)}`);
+        return footer.render(width).map(row => ` ${this.#componentRuntime.components.text.truncateToWidth(row, width)}`);
     }
     #setToolsExpanded(expanded) {
         this.#toolsExpanded = expanded;
         this.header.setExpanded(expanded);
         this.resources.setExpanded(expanded);
-        for (const component of this.#document.components())
+        for (const component of this.transcript.components())
             component.setExpanded(expanded);
         // Invariant: expansion changes what a block draws without changing its revision.
-        this.#document.invalidate("tools-expanded");
+        this.transcript.invalidate("tools-expanded");
         this.invalidate();
     }
 }
@@ -634,7 +563,7 @@ function withoutTerminalBackground(text) {
  * The pinned-profile screen: a followed transcript scroll above the dock. The runtime mounts one such layout,
  * so its single `transcript` scroll view is shared by whichever session the parts currently resolve to.
  */
-export function pinnedLayoutRoot(parts) {
+export function pinnedLayoutRoot(parts, theme) {
     return {
         type: "stack",
         direction: "vertical",
@@ -651,8 +580,8 @@ export function pinnedLayoutRoot(parts) {
                     primary: true,
                     overscroll: "chain",
                     scrollbar: "auto",
-                    scrollbarTrackStyle: text => piTheme().fg("scrollbarTrack", text),
-                    scrollbarThumbStyle: text => piTheme().fg("scrollbarThumb", text),
+                    scrollbarTrackStyle: text => theme.current().fg("scrollbarTrack", text),
+                    scrollbarThumbStyle: text => theme.current().fg("scrollbarThumb", text),
                     child: { type: "component", component: parts.document },
                 },
             },
@@ -684,168 +613,13 @@ function layoutPort(render, invalidate, handleInput) {
         ...(handleInput === undefined ? {} : { handleInput }),
     };
 }
-export function shellResourceEntries(backend) {
-    const resources = backend.extensions.nonVisualResources().map(resource => ({
-        section: resource.kind === "skill"
-            ? "Skills"
-            : resource.kind === "prompt-template"
-                ? "Prompts"
-                : resource.kind === "theme"
-                    ? "Themes"
-                    : "Context",
-        label: resource.kind === "prompt-template"
-            ? `/${resource.label}`
-            : resource.kind === "agent-context" || resource.kind === "system-prompt"
-                ? compactResourceLabel(resource.sourcePath ?? resource.label)
-                : resource.label,
-        sourcePath: resource.sourcePath,
-        diagnostic: resource.diagnostic,
-    }));
-    const extensions = backend.extensions.extensionResources().filter(extension => !extension.hidden);
-    const loadedExtensions = extensions.filter(extension => extension.diagnostic === null);
-    const extensionLabels = compactExtensionLabels(loadedExtensions);
-    for (const extension of extensions) {
-        const labelIndex = loadedExtensions.indexOf(extension);
-        resources.push({
-            section: "Extensions",
-            label: extensionLabels[labelIndex] ?? compactResourceLabel(extension.sourcePath ?? extension.resolvedPath ?? "extension"),
-            sourcePath: extension.sourcePath ?? extension.resolvedPath,
-            diagnostic: extension.diagnostic,
-        });
-    }
-    return resources;
-}
-function compactResourceLabel(path) {
-    const segments = compactPathSegments(path);
-    const leaf = segments.at(-1) ?? path;
-    if ((leaf === "index.ts" || leaf === "index.js") && segments.length > 1)
-        return segments.at(-2) ?? leaf;
-    return leaf;
-}
-/**
- * Pinned from InteractiveMode's compact extension-label helpers at Pi commit
- * 914cf1472e715297caa30db4b9535d534a9eb718. The source metadata crosses an
- * A1-owned boundary first; the owned shell never inspects Pi's private root.
- */
-function compactExtensionLabels(extensions) {
-    const localExtensions = extensions
-        .filter(extension => !isPackageExtensionSource(extension.sourceInfo))
-        .map(extension => {
-        const path = extension.sourcePath ?? extension.resolvedPath ?? "extension";
-        const segments = compactPathSegments(path);
-        if (segments.length > 1 && (segments.at(-1) === "index.ts" || segments.at(-1) === "index.js"))
-            segments.pop();
-        return { extension, segments };
-    });
-    return extensions.map(extension => {
-        const resourcePath = extension.sourcePath ?? extension.resolvedPath ?? "extension";
-        if (isPackageExtensionSource(extension.sourceInfo)) {
-            return compactPackageExtensionLabel(resourcePath, extension.sourceInfo);
-        }
-        const localIndex = localExtensions.findIndex(item => item.extension === extension);
-        const segments = localExtensions[localIndex]?.segments;
-        if (!segments || segments.length === 0)
-            return compactResourceLabel(resourcePath);
-        for (let count = 1; count <= segments.length; count += 1) {
-            const candidate = segments.slice(-count).join("/");
-            if (localExtensions.every((item, itemIndex) => itemIndex === localIndex || item.segments.slice(-count).join("/") !== candidate)) {
-                return candidate;
-            }
-        }
-        return segments.join("/");
-    });
-}
-function compactPackageExtensionLabel(resourcePath, sourceInfo) {
-    const sourceLabel = compactPackageSourceLabel(sourceInfo.source);
-    if (!sourceLabel)
-        return compactResourceLabel(resourcePath);
-    const shortPath = shortPackagePath(resourcePath, sourceInfo).replaceAll("\\", "/");
-    const packagePath = shortPath.startsWith("extensions/") ? shortPath.slice("extensions/".length) : shortPath;
-    const slash = packagePath.lastIndexOf("/");
-    const fileName = slash < 0 ? packagePath : packagePath.slice(slash + 1);
-    const directory = slash < 0 ? "" : packagePath.slice(0, slash);
-    const extension = fileName.lastIndexOf(".");
-    const name = extension <= 0 ? fileName : fileName.slice(0, extension);
-    if (name === "index")
-        return !directory || directory === "." ? sourceLabel : `${sourceLabel}:${directory}`;
-    return `${sourceLabel}:${packagePath}`;
-}
-function compactPackageSourceLabel(source) {
-    if (source.startsWith("npm:"))
-        return source.slice("npm:".length) || source;
-    if (!source.startsWith("git:"))
-        return source;
-    const gitSource = source.slice("git:".length).trim();
-    let repositoryPath;
-    const scpLike = gitSource.match(/^git@[^:]+:(.+)$/);
-    if (scpLike?.[1]) {
-        repositoryPath = scpLike[1];
-    }
-    else if (/^[a-z]+:\/\//i.test(gitSource)) {
-        try {
-            repositoryPath = new URL(gitSource).pathname.replace(/^\/+/, "");
-        }
-        catch {
-            return source;
-        }
-    }
-    else {
-        const slash = gitSource.indexOf("/");
-        if (slash >= 0)
-            repositoryPath = gitSource.slice(slash + 1);
-    }
-    if (!repositoryPath)
-        return source;
-    const ref = repositoryPath.indexOf("@");
-    const withoutRef = ref < 0 ? repositoryPath : repositoryPath.slice(0, ref);
-    return withoutRef.replace(/\.git$/, "") || source;
-}
-function shortPackagePath(resourcePath, sourceInfo) {
-    const fullPath = normalizeResourcePath(resourcePath);
-    const baseDir = sourceInfo.baseDir === null ? undefined : normalizeResourcePath(sourceInfo.baseDir).replace(/\/$/, "");
-    if (baseDir) {
-        const npmRoot = baseDir.match(/^(.*\/node_modules)\/(@?[^/]+(?:\/[^/]+)?)$/);
-        if (npmRoot?.[1] && fullPath.startsWith(`${npmRoot[1]}/`))
-            return relativeResourcePath(baseDir, fullPath);
-        if (fullPath === baseDir)
-            return ".";
-        if (fullPath.startsWith(`${baseDir}/`))
-            return fullPath.slice(baseDir.length + 1);
-    }
-    const npmMatch = fullPath.match(/node_modules\/(@?[^/]+(?:\/[^/]+)?)\/(.*)/);
-    if (npmMatch?.[2] && sourceInfo.source.startsWith("npm:"))
-        return npmMatch[2];
-    const gitMatch = fullPath.match(/git\/[^/]+\/[^/]+\/(.*)/);
-    if (gitMatch?.[1] && sourceInfo.source.startsWith("git:"))
-        return gitMatch[1];
-    return resourcePath;
-}
-function relativeResourcePath(from, to) {
-    const fromSegments = from.split("/").filter(Boolean);
-    const toSegments = to.split("/").filter(Boolean);
-    let common = 0;
-    while (common < fromSegments.length && common < toSegments.length
-        && fromSegments[common]?.toLowerCase() === toSegments[common]?.toLowerCase())
-        common += 1;
-    return [...fromSegments.slice(common).map(() => ".."), ...toSegments.slice(common)].join("/") || ".";
-}
-function compactPathSegments(path) {
-    return normalizeResourcePath(path).split("/").filter(segment => segment.length > 0 && segment !== "~");
-}
-function normalizeResourcePath(path) {
-    return path.replaceAll("\\", "/");
-}
-function isPackageExtensionSource(sourceInfo) {
-    const source = sourceInfo?.source ?? "";
-    return source.startsWith("npm:") || source.startsWith("git:");
+function createViewportTheme(source) {
+    return {
+        track: text => `${SCROLLBAR_CELL_RESET}${source.current().fg("dim", text)}`,
+        thumb: text => `${SCROLLBAR_CELL_RESET}${source.current().fg("accent", text)}`,
+        sticky: (text, hovered) => source.current().background(hovered ? "selectedBg" : "toolPendingBg", source.current().fg("text", withoutTerminalBackground(text))),
+        quietSticky: text => `\u001b[2m${text.replace(/\u001b\[(?:0|22)m/g, "$&\u001b[2m")}\u001b[22m`,
+        bottomControl: (text, hovered) => source.current().background(hovered ? "selectedBg" : "toolPendingBg", source.current().fg("text", text)),
+        selection: paintTextSelection,
+    };
 }
-// Performance: stable painter identities let the neutral viewport retain row-level
-// selection variants while each callback still resolves the live Pi theme.
-const VIEWPORT_THEME = {
-    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: paintTextSelection,
-};