From 32f1c6c26033dfb63fcc0a230e883fcd7e22089e Mon Sep 17 00:00:00 2001
From: abose <arun@core.ai>
Date: Sat, 10 Oct 2026 01:06:55 +0530
Subject: [PATCH 1/3] feat(ai): expose rich questions and interactive chat
 previews

Add askRichQuestion to the shared panel and CLI tool catalog, with reusable
HTML/CSS/JS files, answer handling and cancellation when its call ends.
Guide standalone visual examples into interactive chat fences while
keeping actual-page interactions in Live Preview.

Add localized rich-UI labels and shared composer, question and source-view
styles. Route Shadow DOM and middle-click links through Phoenix's existing
URL opener. Extend the registered CLI tool contract checks.

Validation: CLI Connector passes 57/57 on Linux and macOS. Paired Pro
renderer, question, history and composer checks pass on Linux, macOS and
Windows, including the final source-viewer regression on each platform.
Changed-file ESLint, release Terser 3.17 parsing, LESS compilation and
whitespace checks pass. Push and CI remain pending; the Pro pin is unchanged.
---
 src-node/ai-cli-connector.js           |   5 +-
 src-node/ai-editor-tool-specs.js       |  66 ++++++
 src-node/ai-system-prompt.js           |  34 ++-
 src-node/claude-code-agent.js          |   1 +
 src-node/test/test-ai-cli-connector.js |   1 +
 src/brackets.js                        |  13 +-
 src/nls/root/strings.js                |  14 ++
 src/styles/Extn-AIChatPanel.less       | 288 +++++++++++++++++++------
 test/spec/AICliConnector-test.js       |  10 +-
 9 files changed, 361 insertions(+), 71 deletions(-)

diff --git a/src-node/ai-cli-connector.js b/src-node/ai-cli-connector.js
index 2576b33212..e247bf099f 100644
--- a/src-node/ai-cli-connector.js
+++ b/src-node/ai-cli-connector.js
@@ -249,7 +249,10 @@ class CliConnector {
         try {
             return await deadline(spec.handler(args), timeoutMs);
         } finally {
-            if (spec.name === "askInLivePreview") { this.cancelCall(session, frame.id); }
+            // A question still showing when its call ends, by error or budget, must not outlive it.
+            if (spec.name === "askInLivePreview" || spec.name === "askRichQuestion") {
+                this.cancelCall(session, frame.id);
+            }
         }
     }
 
diff --git a/src-node/ai-editor-tool-specs.js b/src-node/ai-editor-tool-specs.js
index a2eba6a729..6d1ac9948d 100644
--- a/src-node/ai-editor-tool-specs.js
+++ b/src-node/ai-editor-tool-specs.js
@@ -23,6 +23,7 @@
 const path = require("path");
 const fs = require("fs");
 const { z } = require("zod");
+const {RICH_UI_STYLE_GUIDANCE} = require("./ai-system-prompt");
 
 // Absolute path to the bundled API reference, mirrored from
 // docs/API-Reference/ at build time by build/api-docs-generator.js.
@@ -52,6 +53,10 @@ const EXEC_PEER_TIMEOUT_MS = {
     useImage: 90000
 };
 
+// A rich question waits until the user answers or its owner cancels it. The CLI transport needs a finite
+// budget; this one is a day, and ending it cancels the question in the editor like any CLI cancellation.
+const RICH_QUESTION_FAILSAFE_MS = 24 * 60 * 60 * 1000;
+
 // Floor for caller-provided timeouts (e.g. execJsInLivePreview's
 // timeoutMs). 5s minimum stops the model from spamming impatient retries
 // on a preview that's just taking a beat to settle. No ceiling — the
@@ -97,6 +102,9 @@ function getToolTimeout(name, args = {}) {
     if (name === "askInLivePreview") {
         return (args.timeoutS || 300) * 1000 + 15000;
     }
+    if (name === "askRichQuestion") {
+        return RICH_QUESTION_FAILSAFE_MS;
+    }
     if (name === "execJsInEditor" || name === "execJsInLivePreview") {
         return _resolveCallerTimeout(args.timeoutMs, 10000);
     }
@@ -842,6 +850,64 @@ function getEditorToolSpecs(peerCall, options = {}) {
         }
     );
 
+    addTool(
+        "askRichQuestion",
+        "Ask the user a question shown as rich interactive UI " +
+        (options.cli ? "in your session's pane in Phoenix" : "in the chat") + ", with no live preview needed, and " +
+        "wait for the answer: a visual choice, a short form, or something to look at and confirm. Prefer choices: " +
+        "each has id, label and optional description/color; Phoenix renders the cards and a pick returns " +
+        "{choice:id,label}. For custom content pass html or uiFile with its own <style> or cssFile, and mark options " +
+        "class='ph-choice' data-id='<id>'; this wires the answer without applying card styling. " +
+        RICH_UI_STYLE_GUIDANCE +
+        "Interaction code goes in scriptFile or an inline <script> in the markup " +
+        "and runs sandboxed as " + (options.cli ? "function(ui, params, root), where root is the question's own " +
+        "DOM inside an isolated frame" : "function(ui, params), with no DOM, window or root") + ". No external " +
+        "scripts, libraries or network. The ui API: on(selector, event, handler, {preventDefault}), whose handler " +
+        "gets {value, checked, key, dataset, values}; text(selector, value), html(selector, value) and " +
+        "value(selector, value); attr(selector, name, value) and style(selector, name, value); show(selector, " +
+        "visible); getState() and setState(object); answer(value) and cancel(); interval(fn, ms), timeout(fn, ms) " +
+        "and cleanup(fn). params is data for the UI and its script. " +
+        (options.cli ? "Phoenix supplies the titlebar from summary, Close, and a reply box that returns " +
+            "answer:{text:string}; do not duplicate them in your markup. " : "") +
+        "Set acknowledgement to show an OK button for " +
+        "something the user only needs to review. Write reusable files in getEditorState's askInLivePreviewUiDir " +
+        "and pass their names. The result is {answered:true, answer, answeredIn:'richUI'}, {acknowledged:true}, " +
+        "{cancelled:true, by} or an error. It waits until the user answers or closes it, or the turn is stopped.",
+        {
+            summary: z.string().min(1).max(200).describe("Short title saying what you are asking"),
+            html: z.string().max(200000).optional().describe("Question markup with its own <style>; or use uiFile"),
+            uiFile: z.string().min(1).optional().describe("Markup file: an absolute path, or a file name inside " +
+                "askInLivePreviewUiDir; up to 200000 characters"),
+            cssFile: z.string().min(1).optional().describe("Stylesheet file for the markup, located like uiFile"),
+            scriptFile: z.string().min(1).optional().describe("Script file located like uiFile, run as the body of " +
+                (options.cli ? "function(ui, params, root)" : "function(ui, params)") + "; up to 100000 characters"),
+            params: z.object({}).passthrough().optional().describe("Data for the UI and its script"),
+            choices: z.array(z.object({
+                id: z.string().min(1).max(64),
+                label: z.string().min(1).max(500),
+                description: z.string().max(1000).optional(),
+                color: z.string().max(64).optional()
+            })).min(1).max(20).optional().describe("Options; IDs match ph-choice data-id in custom markup"),
+            acknowledgement: z.boolean().optional().describe("Show an OK button; the result is {acknowledged:true}")
+        },
+        async function (args) {
+            try {
+                // No timeout of its own: the chat's Stop or the CLI's cancellation ends the question.
+                const result = await nodeConnector.execPeer("askRichQuestion", args || {});
+                if (result && result.error) {
+                    return {content: [{ type: "text", text: "Error: " + result.error }], isError: true};
+                }
+                return {content: [{ type: "text", text: JSON.stringify(result) }]};
+            } catch (err) {
+                return {content: [{ type: "text", text: "Error asking the question: " + err.message }], isError: true};
+            }
+        },
+        {
+            alwaysLoad: true,
+            searchHint: "ask the user with rich interactive UI in the conversation, without a live preview"
+        }
+    );
+
     addTool(
         "notifyUser",
         "Show a short notification toast in the editor window, outside the chat. Use it only when the " +
diff --git a/src-node/ai-system-prompt.js b/src-node/ai-system-prompt.js
index c3c27dd7c9..e7468f52bb 100644
--- a/src-node/ai-system-prompt.js
+++ b/src-node/ai-system-prompt.js
@@ -25,6 +25,14 @@ const SERVER_INSTRUCTIONS = "Phoenix Code editor tools for the session launched
     "Call getEditorState for the user's current file and preview. Before native edits use flushUnsavedFiles; " +
     "afterwards use refreshFilesFromDisk. Preserve unsaved typing and stop on conflicts. " +
     "Prefer these tools for Phoenix screenshots, live preview and editor controls.";
+// Match the default AI sidebar surface; authored rich content remains transparent unless it sets a background.
+const RICH_UI_STYLE_GUIDANCE = "Rich content sits on Phoenix's dark panel (default background #252525, " +
+    "inherited text #e0e0e0), not a white page. Its transparent boundary resets inherited text formatting " +
+    "except the chat font and text colour; your CSS controls the content inside. " +
+    "Transparent areas show the panel. Inherit the chat font/colour, " +
+    "or set both foreground and background for your custom surfaces, including hover, focus and disabled states. " +
+    "Design for a narrow, resizable sidebar. Images can use HTTPS URLs or inline <svg>. " +
+    "For SVG in an <img> data URL, URL-encode the SVG (including # colours) or use base64. ";
 
 /**
  * Build the Phoenix append without replacing the CLI's own system instructions.
@@ -151,7 +159,7 @@ function buildSystemPrompt({projectPath, scratchDir, locale, cli = false} = {})
     "user's attention and they may be away from the chat. Never use it for ordinary replies. " +
     (cli ? "It is skipped while your originating CLI session is visible unless you pass alwaysShow." :
         "It is skipped while the AI panel is visible unless you pass alwaysShow.") +
-    "\n- askInLivePreview: whenever showing beats telling and the page is in the live preview, " +
+    "\n- askInLivePreview: for visual requests about the actual page in the live preview, " +
     "compose UI with askInLivePreview instead of prose: a choice about one element (its colour, " +
     "copy, placement), a choice about the whole page (theme, palette, typography, layout direction, " +
     "which of several designs to keep), or simply to present something visually (a mockup, a " +
@@ -167,6 +175,29 @@ function buildSystemPrompt({projectPath, scratchDir, locale, cli = false} = {})
         "(yours to write freely, no permission is asked and the user is not shown those writes). ") +
     "The tool description is the whole contract; never look for its implementation, " +
     "and keep the look-at-the-page step to one screenshot or one execJsInLivePreview." +
+    "\n- Rich UI outside the live page: When asked to show visual examples, components or demos " +
+    "(for example, 'show me a carousel with images'), render a working visual by default. Use ordinary " +
+    "code fences when the user asks for source code or a code walkthrough. Standalone examples belong " +
+    "here even if an unrelated page is open; do not read or edit project files just to display them. " + (cli ?
+        "use askRichQuestion for a visual explanation, interactive mockup or question in your own terminal pane; " +
+        "set acknowledgement:true for a visual that only needs OK. Do not print rich Markdown fences in a CLI." :
+        "use a complete top-level fenced code block with language phoenix_interactive_preview_html for a " +
+        "nonblocking visual embedded naturally in your reply. Put plain HTML, <style> and optionally <script> " +
+        "inside it, no React or external libraries. " +
+        "Use askRichQuestion only when you need to wait for an answer. " +
+        "Inline scripts run in a shared DOM-free worker, never in the editor. Available API: " +
+        "ui.on(selector,event,fn,{preventDefault:true}) passes {value,checked,key,dataset,values}; " +
+        "ui.text/html/value(selector,value), ui.attr/style(selector,name,value), ui.show(selector,bool), " +
+        "ui.getState(), ui.setState(serializableObject), ui.timeout/interval(fn,ms), ui.cleanup(fn). " +
+        "Initialize state from ui.getState() and save changes with ui.setState() so controls restore from history. " +
+        "Example: <button id='inc'>+</button><output id='n'>0</output><script>" +
+        "let s=ui.getState();s.n=s.n||0;ui.text('#n',s.n);ui.on('#inc','click',()=>{" +
+        "ui.text('#n',++s.n);ui.setState(s);});</script>. " +
+        "There is no document/window/root, fetch, imports or filesystem API in inline scripts. " +
+        "Use ui.on, not HTML onclick attributes. CSS is scoped to this block; no external CSS resources. " +
+        "Keep display widgets self-contained and compact; no answer callback is needed.") +
+    " " + RICH_UI_STYLE_GUIDANCE +
+    "This feature does not inspect or change the actual live page: use askInLivePreview for that instead." +
     "\n\nEDITS THAT LAND IN THE LIVE PREVIEW: when you edit the file getEditorState " +
     "reported as livePreviewFile — or a CSS / JS / SVG file it links to — the user is " +
     "watching the result render. Whether that is worth checking is your judgement call, " +
@@ -255,3 +286,4 @@ function buildEditorContextLine(ctx, options = {}) {
 exports.buildSystemPrompt = buildSystemPrompt;
 exports.buildEditorContextLine = buildEditorContextLine;
 exports.SERVER_INSTRUCTIONS = SERVER_INSTRUCTIONS;
+exports.RICH_UI_STYLE_GUIDANCE = RICH_UI_STYLE_GUIDANCE;
diff --git a/src-node/claude-code-agent.js b/src-node/claude-code-agent.js
index 409f355d24..04a9877d77 100644
--- a/src-node/claude-code-agent.js
+++ b/src-node/claude-code-agent.js
@@ -1463,6 +1463,7 @@ async function _runQuery(requestId, prompt, projectPath, model, signal, locale,
             "mcp__phoenix-editor__getProblems",
             "mcp__phoenix-editor__notifyUser",
             "mcp__phoenix-editor__askInLivePreview",
+            "mcp__phoenix-editor__askRichQuestion",
             "mcp__phoenix-editor__controlEditor",
             "mcp__phoenix-editor__resizeLivePreview",
             "mcp__phoenix-editor__wait",
diff --git a/src-node/test/test-ai-cli-connector.js b/src-node/test/test-ai-cli-connector.js
index b5efd9c1d2..4c8dcc3309 100644
--- a/src-node/test/test-ai-cli-connector.js
+++ b/src-node/test/test-ai-cli-connector.js
@@ -402,6 +402,7 @@ exports.exercise = async function ({scenario}) {
         return {names: specs.map(spec => spec.name), sdkNames: built.map(tool => tool.name),
             stateAlwaysLoaded: specs.find(spec => spec.name === "getEditorState").alwaysLoad,
             askTimeout: getToolTimeout("askInLivePreview", {timeoutS: 1800}),
+            richQuestionTimeout: getToolTimeout("askRichQuestion"),
             imageTimeout: getToolTimeout("useImage")};
     }
     if (scenario === "prompt") {
diff --git a/src/brackets.js b/src/brackets.js
index fb735919b8..137bfef671 100644
--- a/src/brackets.js
+++ b/src/brackets.js
@@ -478,14 +478,19 @@ define(function (require, exports, module) {
         // changes). We can't use a simple .on("click", "a") because of http://bugs.jquery.com/ticket/3861:
         // jQuery hides non-left clicks from such event handlers, yet middle-clicks still cause CEF to
         // navigate. Also, a capture handler is more reliable than bubble.
-        window.document.body.addEventListener("click", function (e) {
+        /**
+         * Route links, including links inside Shadow DOM, through the native URL opener.
+         * @param {MouseEvent} e Click or middle-button activation.
+         */
+        function handleLinkClick(e) {
             // Don't interfere with context menu clicks
             if (e.button === 2 || (brackets.platform === "mac" && e.ctrlKey)) {
                 return;
             }
 
             // Check parents too, in case link has inline formatting tags
-            let node = e.target, url;
+            const path = e.composedPath ? e.composedPath() : [];
+            let node = path[0] || e.target, url;
             while (node) {
                 if (node.tagName === "A") {
                     url = node.getAttribute("href");
@@ -498,7 +503,9 @@ define(function (require, exports, module) {
                 }
                 node = node.parentElement;
             }
-        }, true);
+        }
+        window.document.body.addEventListener("click", handleLinkClick, true);
+        window.document.body.addEventListener("auxclick", handleLinkClick, true);
 
         // jQuery patch to shim deprecated usage of $() on EventDispatchers
         const DefaultCtor = jQuery.fn.init;
diff --git a/src/nls/root/strings.js b/src/nls/root/strings.js
index 92f0bf711f..6432cd22ed 100644
--- a/src/nls/root/strings.js
+++ b/src/nls/root/strings.js
@@ -2776,6 +2776,20 @@ define({
     "AI_CHAT_SETUP_NEED_HELP": "Need Help?",
     "AI_CHAT_SETUP_LEARN_MORE": "Learn More",
     "AI_CHAT_RETRY": "Retry",
+    "AI_RICH_TITLE": "Interactive content",
+    "AI_RICH_CLI_ASKING": "{0} is asking a question",
+    "AI_RICH_SCRIPT_ERROR": "This interactive content encountered an error.",
+    "AI_RICH_SCRIPT_STOPPED": "This interactive content stopped responding.",
+    "AI_RICH_DISMISSED": "Dismissed",
+    "AI_RICH_ANSWERED": "Answered",
+    "AI_RICH_SEE_CODE": "See code",
+    "AI_RICH_REPLY_PLACEHOLDER": "Write a reply…",
+    "AI_RICH_SOURCE_TITLE": "Source code",
+    "AI_RICH_COPY_CODE": "Copy code",
+    "AI_RICH_SOURCE_READ_ONLY": "Read-only",
+    "AI_RICH_SOURCE_WRAP": "Wrap lines",
+    "AI_RICH_PREVIEW_GENERATING": "Building preview…",
+    "AI_RICH_PREVIEW_INCOMPLETE": "Incomplete preview",
     "AI_CHAT_DESKTOP_ONLY": "AI features require the {APP_NAME} desktop app. Download it to get started.",
     "AI_CHAT_DOWNLOAD_BTN": "Download Desktop App",
     "AI_CHAT_PLACEHOLDER_TITLE": "Design, build, and fix faster with AI",
diff --git a/src/styles/Extn-AIChatPanel.less b/src/styles/Extn-AIChatPanel.less
index bf2c4a54c0..be29f93f3e 100644
--- a/src/styles/Extn-AIChatPanel.less
+++ b/src/styles/Extn-AIChatPanel.less
@@ -42,6 +42,65 @@
 @ai-dialog-note:    13px;                         // one tick down, still comfortably readable
 @ai-line-compact:   1.4;                          // single-line UI elements
 
+// Shared by the chat and CLI question composers, without sharing their event-target classes.
+.ai-composer-wrap() {
+    display: flex;
+    align-items: flex-end;
+    background-color: @bc-ai-input-bg;
+    border: 1px solid @bc-ai-input-border;
+    border-radius: 8px;
+    transition: border-color 0.15s ease;
+    overflow: hidden;
+
+    &:focus-within {
+        background-color: @bc-ai-input-bg-focused;
+        border-color: @bc-ai-input-border-focus;
+    }
+
+    &.disabled { opacity: 0.5; }
+}
+
+.ai-composer-textarea() {
+    flex: 1;
+    min-width: 0;
+    background: transparent !important;
+    border: none !important;
+    color: @project-panel-text-1;
+    font-size: @ai-text-body;
+    font-family: inherit;
+    padding: 10px 0 10px 12px;
+    margin: 0;
+    resize: none;
+    min-height: 24px;
+    max-height: 120px;
+    line-height: @ai-line-compact;
+    outline: none !important;
+    box-shadow: none !important;
+
+    &:disabled { cursor: not-allowed; }
+}
+
+.ai-composer-send() {
+    background: none;
+    border: none;
+    padding: 1px 6px;
+    color: @project-panel-text-2;
+    width: 30px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    align-self: stretch;
+    border-radius: 0 7px 7px 0;
+    opacity: 0.5;
+    transition: opacity 0.15s ease, color 0.15s ease;
+
+    &:hover { opacity: 1; color: @project-panel-text-1; }
+    &:disabled { opacity: 0.2; cursor: not-allowed; }
+    i { font-size: @ai-text-body; }
+}
+
 // Warning-tone chrome (e.g. the CLI-mode "project switched" banner). Must
 // stay fully opaque — it overlays live terminal output, so any see-through
 // background would make its text unreadable against arbitrary content
@@ -408,6 +467,81 @@
     }
 }
 
+/* Cover the waiting terminal with its question; the CLI toolbar remains visible above it. */
+.ai-cli-rich-question {
+    position: absolute;
+    inset: 0;
+    z-index: 7;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    background: @bc-ai-sidebar-bg;
+    color: @project-panel-text-1;
+
+    &:empty {
+        display: none;
+    }
+}
+
+.ai-rich-frame-panel {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    height: 100%;
+    min-height: 0;
+    min-width: 0;
+}
+.ai-rich-frame-header {
+    display: flex;
+    flex: none;
+    align-items: center;
+    gap: 12px;
+    padding: 10px 12px;
+    border-bottom: 1px solid rgba(128, 128, 128, 0.25);
+    h2 { margin: 0; font: inherit; font-weight: 600; overflow-wrap: anywhere; }
+}
+.ai-rich-frame-heading { flex: 1; min-width: 0; }
+.ai-rich-frame-context { font-size: @ai-text-secondary; opacity: 0.65; margin-bottom: 4px; overflow-wrap: anywhere; }
+.ai-rich-frame-close {
+    flex: none;
+    border: 0;
+    background: none;
+    color: inherit;
+    cursor: pointer;
+    padding: 4px 6px;
+    opacity: 0.7;
+    &:hover:not(:disabled), &:focus-visible { opacity: 1; }
+    &:disabled { cursor: default; opacity: 0.3; }
+}
+.ai-rich-frame-close { font-size: 22px; line-height: 1; }
+.ai-rich-frame-footer {
+    flex: none;
+    padding: 10px 12px;
+    border-top: 1px solid rgba(128, 128, 128, 0.25);
+}
+.ai-rich-frame-reply {
+    .ai-composer-wrap();
+    padding: 0;
+    textarea { .ai-composer-textarea(); }
+}
+.ai-rich-frame-send { .ai-composer-send(); }
+.ai-rich-frame-actions {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-top: 6px;
+    .ai-rich-frame-source { flex: 1; }
+    .ai-rich-source-actions { justify-content: flex-start; }
+    .ai-rich-source-status:empty { display: none; }
+    .ai-rich-see-code { margin-left: 0; }
+    [hidden] { display: none; }
+}
+
+.ai-rich-summary {
+    margin-bottom: 10px;
+    line-height: @ai-line-prose;
+}
+
 /* Local transfer feedback: stays inside the terminal and lets typing/clicks pass through. */
 .hud-overlay.ai-cli-transfer-hud {
     position: absolute;
@@ -4453,22 +4587,7 @@
     padding: 6px 8px 8px 8px;
 
     .ai-chat-input-wrap {
-        display: flex;
-        align-items: flex-end;
-        background-color: @bc-ai-input-bg;
-        border: 1px solid @bc-ai-input-border;
-        border-radius: 8px;
-        transition: border-color 0.15s ease;
-        overflow: hidden;
-
-        &:focus-within {
-            background-color: @bc-ai-input-bg-focused;
-            border-color: @bc-ai-input-border-focus;
-        }
-
-        &.disabled {
-            opacity: 0.5;
-        }
+        .ai-composer-wrap();
     }
 
     .ai-chat-mode-row {
@@ -4873,55 +4992,11 @@
     }
 
     .ai-chat-textarea {
-        flex: 1;
-        min-width: 0;
-        background: transparent !important;
-        border: none !important;
-        color: @project-panel-text-1;
-        font-size: @ai-text-body;
-        font-family: inherit;
-        padding: 10px 0 10px 12px;
-        margin: 0;
-        resize: none;
-        min-height: 24px;
-        max-height: 120px;
-        line-height: @ai-line-compact;
-        outline: none !important;
-        box-shadow: none !important;
-
-        &:disabled {
-            cursor: not-allowed;
-        }
+        .ai-composer-textarea();
     }
 
     .ai-send-btn {
-        background: none;
-        border: none;
-        color: @project-panel-text-2;
-        width: 30px;
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-shrink: 0;
-        align-self: stretch;
-        border-radius: 0 7px 7px 0;
-        opacity: 0.5;
-        transition: opacity 0.15s ease, color 0.15s ease;
-
-        &:hover {
-            opacity: 1;
-            color: @project-panel-text-1;
-        }
-
-        &:disabled {
-            opacity: 0.2;
-            cursor: not-allowed;
-        }
-
-        i {
-            font-size: @ai-text-body;
-        }
+        .ai-composer-send();
     }
 
     .ai-stop-btn {
@@ -7330,3 +7405,92 @@
     opacity: 0.7;
     margin-left: 5px;
 }
+
+.ai-rich-source-actions {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    padding: 4px 0;
+    font-size: 12px;
+    line-height: 1.5;
+    white-space: normal;
+
+    .ai-rich-source-status { flex: none; opacity: 0.65; white-space: nowrap; }
+    .ai-rich-source-progress {
+        flex: 1;
+        min-width: 0;
+        box-sizing: border-box;
+        height: 22px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: pre;
+        padding: 2px 6px;
+        border-radius: 3px;
+        background: rgba(128, 128, 128, 0.1);
+        color: inherit;
+        font: inherit;
+        line-height: 18px;
+        font-family: 'SourceCodePro-Medium', 'SourceCodePro', monospace;
+        opacity: 0.75;
+        &[hidden] { display: none; }
+    }
+    .ai-rich-see-code {
+        flex: none;
+        margin-left: auto;
+        border: 0;
+        background: none;
+        color: inherit;
+        font: inherit;
+        padding: 2px 4px;
+        opacity: 0.7;
+        cursor: pointer;
+        &:hover { opacity: 1; text-decoration: underline; }
+        &:focus-visible { outline: 1px solid currentColor; }
+    }
+}
+
+.ai-rich-source-dialog {
+    width: 960px;
+    .modal-header { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
+    .ai-rich-source-language { opacity: 0.65; font-size: 12px; }
+    .modal-body { padding: 12px 16px; max-height: none; }
+    .ai-rich-source-info {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 8px;
+        font-size: 12px;
+        > span { opacity: 0.7; }
+        label { margin: 0; font-size: inherit; }
+        input { margin: 0 4px 0 0; }
+    }
+    .ai-rich-source-tools { display: flex; align-items: center; gap: 16px; }
+    .ai-rich-source-copy {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        padding: 2px 0;
+        border: 0;
+        background: none;
+        box-shadow: none;
+        color: inherit;
+        font: inherit;
+        cursor: pointer;
+        opacity: 0.8;
+        &:hover { opacity: 1; text-decoration: underline; }
+        &:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }
+    }
+    .ai-rich-source-editor-holder {
+        height: 60vh;
+        max-height: 640px;
+        position: relative;
+    }
+    .CodeMirror {
+        height: 100%;
+        font-family: 'SourceCodePro-Medium', 'SourceCodePro', monospace;
+        font-size: 13px;
+        line-height: 1.6;
+        border: 1px solid rgba(128, 128, 128, 0.25);
+    }
+}
diff --git a/test/spec/AICliConnector-test.js b/test/spec/AICliConnector-test.js
index c6129ab7b6..50df7d8f8e 100644
--- a/test/spec/AICliConnector-test.js
+++ b/test/spec/AICliConnector-test.js
@@ -61,17 +61,19 @@ define(function (require, exports, module) {
             expect(result.other.content[0].text).toContain("file.txt");
         });
 
-        it("builds all 17 tools with the installed Agent SDK and retains long tool budgets", async function () {
+        it("builds all 18 tools with the installed Agent SDK and retains long tool budgets", async function () {
             const result = await run("catalog");
-            expect(result.names.length).toBe(17);
+            expect(result.names.length).toBe(18);
             expect(result.sdkNames).toEqual(result.names);
             expect(result.names).toContain("getProblems");
             expect(result.names).toContain("askInLivePreview");
+            expect(result.names).toContain("askRichQuestion");
             expect(result.names).toContain("getUserQuestion");
             expect(result.names).not.toContain("getUserClarification");
             expect(result.names).not.toContain("previewImages");
             expect(result.stateAlwaysLoaded).toBe(true);
             expect(result.askTimeout).toBe(1815000);
+            expect(result.richQuestionTimeout).toBe(86400000);
             expect(result.imageTimeout).toBe(90000);
         });
         it("shares screenshot and editor-state result shaping with the panel", async function () {
@@ -219,13 +221,13 @@ define(function (require, exports, module) {
         it("starts stdio MCP, lists metadata and returns an image block", async function () {
             const result = await run("adapter");
             expect(result.instructions).toContain("Phoenix Code");
-            expect(result.tools.length).toBe(17);
+            expect(result.tools.length).toBe(18);
             expect(result.tools.find(tool => tool.name === "getEditorState")._meta["anthropic/alwaysLoad"]).toBe(true);
             expect(result.result.content[0]).toEqual({type: "image", data: "cG5n", mimeType: "image/png"});
         });
         it("answers MCP discovery while Phoenix is unavailable and returns a useful tool error", async function () {
             const result = await run("adapter-disconnected");
-            expect(result.tools.length).toBe(17);
+            expect(result.tools.length).toBe(18);
             expect(result.result.isError).toBe(true);
         });
         it("returns a native edit denial when an HTTP hook cannot save a dirty buffer", async function () {

From 99955b9ee207a5675a09fee0072766d86d923fe7 Mon Sep 17 00:00:00 2001
From: abose <arun@core.ai>
Date: Sat, 10 Oct 2026 01:09:00 +0530
Subject: [PATCH 2/3] chore(deps): advance Pro pin for interactive AI previews

Pin Phoenix Pro to d3d4f7a, including rich chat previews, inline and CLI
questions, source viewing, restored state and the matching task handoff.

Validation: tracking JSON parses and the pin matches Pro HEAD. The paired
implementation has recorded native checks on Linux, macOS and Windows.
---
 tracking-repos.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tracking-repos.json b/tracking-repos.json
index bdc8bc8e78..05b2dde9be 100644
--- a/tracking-repos.json
+++ b/tracking-repos.json
@@ -1,5 +1,5 @@
 {
   "phoenixPro": {
-    "commitID": "ff0816eb07bcf584377c8532dbd6f650db853c19"
+    "commitID": "d3d4f7a1cf4de810959503ee37a99fd3962b779f"
   }
 }

From 1364d509a626c1ec9e689874554d672d6a115be8 Mon Sep 17 00:00:00 2001
From: abose <arun@core.ai>
Date: Sat, 10 Oct 2026 01:20:30 +0530
Subject: [PATCH 3/3] chore(deps): advance Pro pin for chat scroll restoration

Pin Phoenix Pro to eef0cf4 so new messages resume bottom following after
reading earlier replies, while manual scrolling during a response still
pauses it. Include the registered scroll regression tests and findings.

Validation: tracking JSON parses and the pin matches Pro HEAD. Chat Scroll
5/5 and Question Composer 21/21 pass on Linux, macOS and Windows, with a
successful live pelican postcard replay. CI remains pending after push.
---
 tracking-repos.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tracking-repos.json b/tracking-repos.json
index 05b2dde9be..5e7ec86042 100644
--- a/tracking-repos.json
+++ b/tracking-repos.json
@@ -1,5 +1,5 @@
 {
   "phoenixPro": {
-    "commitID": "d3d4f7a1cf4de810959503ee37a99fd3962b779f"
+    "commitID": "eef0cf4b86bade61c4bb9c7ecf873cc70e3ff40d"
   }
 }