feat: inline markdown output box — render AI reply with marked, do not replace cell

Flow (v3-final corrected):
  1. Model call succeeds.
  2. Server passes the AI reply through unchanged as 'markdown' (the
     system prompt allows ```language fences + a brief explanation, so
     the response is real markdown that marked can render into code
     blocks, headings, etc.).
  3. Client OpenCodeCellActions._handleResponse calls prompt.setOutput(
     resp.markdown); the inline prompt widget renders it with
     marked.parse and shows it in a new output area (hidden until a
     response arrives). The cell source is NOT replaced.
  4. User can close the output or cancel the whole prompt.

Server:
  - New unified system prompt: '你是代码助手 ... 按指令修改代码,可附简
    短说明' (allows ```fences``` + explanation; no more 'no markdown
    fences' restriction).
  - EditHandler returns {ok, markdown, sessionId, notebookPath} (raw
    text, fences intact). _strip_code_fence kept as a helper for any
    future apply-to-cell path; no longer called.
  - finalSource field dropped (the cell-apply path is gone).

Client:
  - OpenCodeSuccess: markdown: string (finalSource removed).
  - OpenCodeInlinePrompt: new output area, setOutput(md) renders via
    marked.parse, hideOutput() closes it.
  - OpenCodeCellActions._handleResponse: setOutput(markdown) instead of
    sharedModel.setSource + auto-hide. The prompt stays open so the
    user can read the output.
  - Uses marked@17 (already in node_modules via JupyterLab; no new dep).
  - CSS: output area styling (border, max-height 320px scroll, code/pre
    styling, close button).

Tests: pytest 34/34, jest 29/29. marked is mocked in jest.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
tao.chen
2026-07-23 18:29:58 +08:00
co-authored by Claude Fable 5
parent 04f90ab5a0
commit 1d7f5da9d4
8 changed files with 205 additions and 19 deletions
+44
View File
@@ -9,6 +9,7 @@
*/
import { CodeCell } from '@jupyterlab/cells';
import { Widget } from '@lumino/widgets';
import { marked } from 'marked';
import type { OpenCodeProvidersResponse } from '../types';
@@ -69,6 +70,8 @@ export class OpenCodeInlinePrompt extends Widget {
private _modelSelect: HTMLSelectElement | null = null;
private _providerModels: FlatProvider[];
private _defaultMap: { [pid: string]: string };
private _outputArea: HTMLDivElement;
private _outputContent: HTMLDivElement;
constructor(
_cell: CodeCell,
@@ -153,6 +156,31 @@ export class OpenCodeInlinePrompt extends Widget {
}
this.node.appendChild(this._textarea);
this.node.appendChild(actions);
// Output area: hidden by default; revealed by setOutput() with the
// markdown-rendered AI response. The cell source is NOT replaced.
this._outputArea = document.createElement('div');
this._outputArea.className = 'opencode-inline-output';
this._outputArea.style.display = 'none';
const outputHeader = document.createElement('div');
outputHeader.className = 'opencode-inline-output-header';
const outputTitle = document.createElement('span');
outputTitle.textContent = '结果';
const outputCloseBtn = document.createElement('button');
outputCloseBtn.className = 'opencode-inline-output-close';
outputCloseBtn.type = 'button';
outputCloseBtn.textContent = '✕';
outputCloseBtn.title = '关闭输出';
outputCloseBtn.addEventListener('click', () => {
this.hideOutput();
});
outputHeader.appendChild(outputTitle);
outputHeader.appendChild(outputCloseBtn);
this._outputContent = document.createElement('div');
this._outputContent.className = 'opencode-inline-output-content';
this._outputArea.appendChild(outputHeader);
this._outputArea.appendChild(this._outputContent);
this.node.appendChild(this._outputArea);
}
private _rebuildModelSelect(providerId: string | undefined): void {
@@ -196,4 +224,20 @@ export class OpenCodeInlinePrompt extends Widget {
this._modelSelect.disabled = disabled;
}
}
/**
* Render the AI response as markdown and show the output area in place
* of replacing the cell source. Safe for local-trusted content from the
* user's OpenCode Serve; do not feed untrusted markdown here without
* adding a sanitizer (e.g. DOMPurify).
*/
setOutput(markdown: string): void {
this._outputContent.innerHTML = marked.parse(markdown) as string;
this._outputArea.style.display = 'block';
}
hideOutput(): void {
this._outputArea.style.display = 'none';
this._outputContent.textContent = '';
}
}