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
+65
View File
@@ -75,6 +75,71 @@
cursor: default;
}
/* Markdown output area: hidden until setOutput() reveals it. */
.opencode-inline-prompt .opencode-inline-output {
display: none;
margin-top: 4px;
padding: 6px 8px;
border: 1px solid var(--jp-border-color1, #c0c0c0);
border-radius: 3px;
background: var(--jp-layout-color2, #f7f7f7);
max-height: 320px;
overflow-y: auto;
}
.opencode-inline-prompt .opencode-inline-output-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 4px;
font-size: var(--jp-ui-font-size1);
font-weight: 600;
color: var(--jp-ui-font-color1, #333);
}
.opencode-inline-prompt .opencode-inline-output-close {
border: none;
background: transparent;
cursor: pointer;
font-size: var(--jp-ui-font-size1);
line-height: 1;
padding: 0 4px;
color: var(--jp-ui-font-color2, #666);
}
.opencode-inline-prompt .opencode-inline-output-close:hover {
color: var(--jp-ui-font-color0, #000);
}
.opencode-inline-prompt .opencode-inline-output-content {
font-size: var(--jp-ui-font-size1);
line-height: 1.45;
}
.opencode-inline-prompt .opencode-inline-output-content pre {
background: var(--jp-layout-color1, #fff);
padding: 6px 8px;
border-radius: 3px;
overflow-x: auto;
margin: 4px 0;
}
.opencode-inline-prompt .opencode-inline-output-content code {
font-family: var(--jp-code-font-family, monospace);
font-size: var(--jp-code-font-size, 13px);
}
.opencode-inline-prompt .opencode-inline-output-content p {
margin: 2px 0;
}
.opencode-inline-prompt .opencode-inline-output-content h1,
.opencode-inline-prompt .opencode-inline-output-content h2,
.opencode-inline-prompt .opencode-inline-output-content h3 {
margin: 6px 0 4px;
font-size: var(--jp-ui-font-size2, 14px);
}
.opencode-inline-prompt textarea {
width: 100%;
resize: vertical;