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
+61 -1
View File
@@ -47,6 +47,11 @@ jest.mock('@lumino/widgets', () => {
return { Widget };
});
jest.mock('marked', () => ({
__esModule: true,
marked: { parse: (md: string) => `<mock>${md}</mock>` }
}));
import {
OpenCodeCellActions,
setOpenCodeProviders,
@@ -324,6 +329,33 @@ describe('OpenCodeCellActions', () => {
cell.node.querySelector('.opencode-inline-prompt .opencode-model-select')
).toBeNull();
});
it('on a successful response, does NOT replace the cell source (renders to inline output instead)', () => {
setOpenCodeProviders(null);
const cell = makeFakeCell('x = 1');
const actions = new OpenCodeCellActions(cell);
// Click once to create the inline prompt (so setOutput has a target).
Object.defineProperty(actions, 'parent', { value: cell, configurable: true });
(actions as any).onAfterAttach({} as any);
const btn = actions.node.querySelector('button') as HTMLButtonElement;
btn.click();
// Simulate a successful response.
(actions as any)._handleResponse({
ok: true,
markdown: '# AI says hi\n\n```python\nprint("hi")\n```',
sessionId: 'ses-abc',
notebookPath: 'foo.ipynb'
});
// The cell source must remain unchanged.
expect((cell as any).model.sharedModel.setSource).not.toHaveBeenCalled();
// The inline output area is now visible with the rendered markdown.
const output = cell.node.querySelector(
'.opencode-inline-prompt .opencode-inline-output'
) as HTMLElement;
expect(output.style.display).toBe('block');
});
});
describe('OpenCodeInlinePrompt', () => {
@@ -336,6 +368,34 @@ describe('OpenCodeInlinePrompt', () => {
providers: null
});
expect(prompt.node.querySelector('textarea')).not.toBeNull();
expect(prompt.node.querySelectorAll('button').length).toBe(2);
// 3 buttons: 发送, 取消, and the output area close (✕).
expect(prompt.node.querySelectorAll('button').length).toBe(3);
});
it('hides the output area by default; setOutput reveals it with rendered markdown', () => {
const cell = makeFakeCell('x = 1');
const prompt = new OpenCodeInlinePrompt(cell, {
onSubmit: jest.fn(),
onCancel: jest.fn(),
disabled: false,
providers: null
});
const output = prompt.node.querySelector(
'.opencode-inline-prompt .opencode-inline-output'
) as HTMLElement;
expect(output).not.toBeNull();
expect(output.style.display).toBe('none');
prompt.setOutput('# Hello\n\n```python\nx = 1\n```');
expect(output.style.display).toBe('block');
const content = prompt.node.querySelector(
'.opencode-inline-prompt .opencode-inline-output-content'
) as HTMLElement;
// marked is mocked to wrap the input in <mock>...</mock>.
expect(content.innerHTML).toContain('<mock>');
expect(content.innerHTML).toContain('# Hello');
prompt.hideOutput();
expect(output.style.display).toBe('none');
});
});