Initial commit: opencode_bridge JupyterLab extension (Slices 1-3.5)
A JupyterLab extension that bridges the cell UI to a local OpenCode Serve process. The extension is a dual package: a Python server extension exposed under /opencode-bridge/*, plus a TypeScript frontend that registers per-cell toolbars. Backend (Python, tornado) - Slice 1: config + auth + OpenCode HTTP client (tornado.httpclient, no aiohttp). 4 settings in schema/plugin.json (url, user, password, request timeout). - Slice 2: handlers for /hello, /health, /providers, /edit. - Slice 2.1 (correction): SessionManager with 1 notebook = 1 session mapping, async-safe via per-path locks, 404 recovery via invalidate(). Two new endpoints: GET /sessions, DELETE /session?notebook=<path>. - 32 pytest tests pass. Frontend (TypeScript, JupyterLab 4.6) - src/types.ts: CellContext, OpenCodeRequest/Response, OpenCodeSettings. - src/context/cell_context.ts: extract CellContext from a CodeCell + its parent NotebookPanel, structured error collection. - src/api/opencode_client.ts: callOpenCodeEdit, callOpenCodeProviders. - src/components/opencode_cell_footer.ts: OpenCodeCellFooter Widget implementing ICellFooter with 3 buttons (optimize / fix / edit), resolved via this.parent instanceof CodeCell. NOT cellToolbar (does not exist in JL 4.6) and NOT Widget.findParent (removed in @lumino/widgets 2.x). - src/components/opencode_cell_factory.ts: Cell.ContentFactory subclass returning the OpenCodeCellFooter. - src/components/opencode_installer.ts: installOpenCodeEverywhere patches every notebook (existing + new) to use the custom factory. - src/index.ts: registers the factory, loads settings, fetches /providers on activation and logs the list to the console. - 23 jest tests pass (mocked JupyterLab boundary, pnpm path safe). Settings - 6 fields: 3 auth (url/user/password) + 1 timeout + 2 model selection (provider/model). Provider list is fetched at startup from /opencode-bridge/providers and printed to the browser console so users can copy values into Settings Editor. Docs - design.md: 6 sections covering architecture, UI flow, API contract, TS skeletons, session management (v0.2.1 correction), and provider/model selection (v0.2.2 addition). - CLAUDE.md: agent guidance for working in this repo. - TODO.md: remaining work for Slices 4-7 + v0.4+ backlog. CI - Gitea release workflow at .github/workflows/build.yml. - Bark notification helper (non-fatal on failure). Generated artefacts ignored: opencode_bridge/labextension/, _version.py, *.tsbuildinfo, junit.xml, test.ipynb scratch notebook.
This commit is contained in:
tao.chen
@@ -0,0 +1,15 @@
|
||||
/**
|
||||
* Custom Cell.ContentFactory that adds our OpenCodeCellFooter to every cell.
|
||||
*
|
||||
* One factory instance per notebook; install via `installOpenCodeInNotebook`.
|
||||
*/
|
||||
import { ICellFooter } from '@jupyterlab/cells';
|
||||
import { Notebook } from '@jupyterlab/notebook';
|
||||
|
||||
import { OpenCodeCellFooter } from './opencode_cell_footer';
|
||||
|
||||
export class OpenCodeCellContentFactory extends Notebook.ContentFactory {
|
||||
createCellFooter(): ICellFooter {
|
||||
return new OpenCodeCellFooter();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,199 @@
|
||||
/**
|
||||
* Per-cell footer widget: renders 3 buttons (optimize / fix / edit) and
|
||||
* wires them to the opencode-bridge server.
|
||||
*
|
||||
* Resolves its owning CodeCell at onAfterAttach via `this.parent`.
|
||||
* Subscribes to the cell model's contentChanged and stateChanged signals
|
||||
* to keep the context fresh.
|
||||
*/
|
||||
import { CodeCell } from '@jupyterlab/cells';
|
||||
import { Notification } from '@jupyterlab/apputils';
|
||||
import type { NotebookPanel } from '@jupyterlab/notebook';
|
||||
import { ServerConnection } from '@jupyterlab/services';
|
||||
import { Widget } from '@lumino/widgets';
|
||||
|
||||
import { callOpenCodeEdit } from '../api/opencode_client';
|
||||
import { extractCellContext } from '../context/cell_context';
|
||||
import type {
|
||||
CellContext,
|
||||
OpenCodeMode,
|
||||
OpenCodeRequest,
|
||||
OpenCodeResponse,
|
||||
OpenCodeSettings,
|
||||
} from '../types';
|
||||
|
||||
// Module-level runtime injection (set by index.ts after settings load).
|
||||
let _settings: OpenCodeSettings | null = null;
|
||||
let _serverSettings: ServerConnection.ISettings | null = null;
|
||||
|
||||
export function setOpenCodeRuntime(args: {
|
||||
settings: OpenCodeSettings;
|
||||
serverSettings: ServerConnection.ISettings;
|
||||
}): void {
|
||||
_settings = args.settings;
|
||||
_serverSettings = args.serverSettings;
|
||||
}
|
||||
|
||||
type Status = 'idle' | 'loading' | 'error';
|
||||
|
||||
export class OpenCodeCellFooter extends Widget {
|
||||
private _cell: CodeCell | null = null;
|
||||
private _context: CellContext | null = null;
|
||||
private _status: Status = 'idle';
|
||||
private _errorMessage: string | null = null;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.addClass('opencode-cell-footer');
|
||||
this._render();
|
||||
}
|
||||
|
||||
protected onAfterAttach(_msg: unknown): void {
|
||||
const parent = this.parent;
|
||||
if (parent instanceof CodeCell) {
|
||||
this._cell = parent;
|
||||
this._cell.model.contentChanged.connect(this._onModelChange, this);
|
||||
this._cell.model.stateChanged.connect(this._onModelChange, this);
|
||||
this._onModelChange();
|
||||
}
|
||||
}
|
||||
|
||||
protected onBeforeDetach(_msg: unknown): void {
|
||||
if (this._cell) {
|
||||
this._cell.model.contentChanged.disconnect(this._onModelChange, this);
|
||||
this._cell.model.stateChanged.disconnect(this._onModelChange, this);
|
||||
}
|
||||
this._cell = null;
|
||||
}
|
||||
|
||||
private _onModelChange(): void {
|
||||
this._context = this._cell ? extractCellContextFromCell(this._cell) : null;
|
||||
this._render();
|
||||
}
|
||||
|
||||
private _render(): void {
|
||||
const node = this.node;
|
||||
node.textContent = '';
|
||||
|
||||
const hasError = this._context?.error != null;
|
||||
const loading = this._status === 'loading';
|
||||
const baseDisabled = !this._context || loading;
|
||||
|
||||
const mkBtn = (
|
||||
label: string,
|
||||
mode: OpenCodeMode,
|
||||
disabled: boolean
|
||||
): HTMLButtonElement => {
|
||||
const b = document.createElement('button');
|
||||
b.className = `opencode-btn opencode-btn-${mode}`;
|
||||
b.textContent = label;
|
||||
b.disabled = disabled;
|
||||
b.title = disabled
|
||||
? loading
|
||||
? 'OpenCode: 请求中…'
|
||||
: 'OpenCode: 等待 cell 上下文…'
|
||||
: label;
|
||||
b.addEventListener('click', () => {
|
||||
void this._onClick(mode);
|
||||
});
|
||||
return b;
|
||||
};
|
||||
|
||||
node.appendChild(mkBtn('✨ 优化', 'optimize', baseDisabled));
|
||||
node.appendChild(mkBtn('🐛 排错', 'fix', baseDisabled || !hasError));
|
||||
node.appendChild(mkBtn('🪄 编辑', 'edit', baseDisabled));
|
||||
|
||||
if (this._status === 'error' && this._errorMessage) {
|
||||
const err = document.createElement('span');
|
||||
err.className = 'opencode-error';
|
||||
err.textContent = this._errorMessage;
|
||||
err.title = this._errorMessage;
|
||||
node.appendChild(err);
|
||||
}
|
||||
}
|
||||
|
||||
private async _onClick(mode: OpenCodeMode): Promise<void> {
|
||||
if (!this._context) {
|
||||
return;
|
||||
}
|
||||
if (!_settings || !_serverSettings) {
|
||||
Notification.error('OpenCode 运行时未初始化，请检查 settings');
|
||||
return;
|
||||
}
|
||||
|
||||
let prompt = '';
|
||||
if (mode === 'edit') {
|
||||
const input = window.prompt('请输入编辑指令：');
|
||||
if (input === null) {
|
||||
return;
|
||||
}
|
||||
prompt = input;
|
||||
}
|
||||
|
||||
const request: OpenCodeRequest = {
|
||||
mode,
|
||||
prompt,
|
||||
context: this._context,
|
||||
providerId: _settings.opencodeProvider || undefined,
|
||||
modelId: _settings.opencodeModel || undefined
|
||||
};
|
||||
|
||||
this._status = 'loading';
|
||||
this._errorMessage = null;
|
||||
this._render();
|
||||
|
||||
try {
|
||||
const resp = await callOpenCodeEdit(request, _serverSettings);
|
||||
this._handleResponse(resp);
|
||||
} catch (e) {
|
||||
this._status = 'error';
|
||||
this._errorMessage = (e as Error).message;
|
||||
this._render();
|
||||
Notification.error(`OpenCode ${mode} 失败: ${this._errorMessage}`);
|
||||
}
|
||||
}
|
||||
|
||||
private _handleResponse(resp: OpenCodeResponse): void {
|
||||
if (resp.ok) {
|
||||
this._status = 'idle';
|
||||
this._render();
|
||||
const len = resp.finalSource.length;
|
||||
Notification.info(
|
||||
`OpenCode ${resp.mode} 完成 (${len} chars). ` +
|
||||
`Diff 面板将在 Slice 4 中提供。Session: ${resp.sessionId.slice(0, 8)}…`
|
||||
);
|
||||
} else {
|
||||
this._status = 'error';
|
||||
this._errorMessage = resp.error;
|
||||
this._render();
|
||||
Notification.error(`OpenCode 错误: ${resp.error}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Resolve a CodeCell's parent NotebookPanel by walking the parent chain,
|
||||
* then build the CellContext. The footer uses this rather than `Widget.findParent`
|
||||
* because that helper was removed in @lumino/widgets 2.x.
|
||||
*/
|
||||
function extractCellContextFromCell(cell: CodeCell): CellContext | null {
|
||||
let node: Widget | null = cell.parent;
|
||||
let notebookPanel: NotebookPanel | null = null;
|
||||
while (node) {
|
||||
// Use duck-typing: a notebook panel has `context.path` and `content.widgets`.
|
||||
const candidate = node as any;
|
||||
if (
|
||||
candidate.context &&
|
||||
candidate.content &&
|
||||
Array.isArray(candidate.content.widgets)
|
||||
) {
|
||||
notebookPanel = candidate;
|
||||
break;
|
||||
}
|
||||
node = node.parent;
|
||||
}
|
||||
if (!notebookPanel) {
|
||||
return null;
|
||||
}
|
||||
return extractCellContext(cell, notebookPanel);
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
/**
|
||||
* Install the OpenCode cell factory on every notebook tracked by INotebookTracker.
|
||||
*
|
||||
* For already-open notebooks: swap their contentFactory in place. Cells created
|
||||
* after this point will use the new factory. (Cells already created retain their
|
||||
* old factory — that's a known limitation; users must reload the notebook to see
|
||||
* the footer in cells that were created before activation.)
|
||||
*
|
||||
* For future notebooks: listen to `tracker.widgetAdded` and swap on addition.
|
||||
*/
|
||||
import type { INotebookTracker, NotebookPanel } from '@jupyterlab/notebook';
|
||||
|
||||
import { OpenCodeCellContentFactory } from './opencode_cell_factory';
|
||||
|
||||
export function installOpenCodeInNotebook(panel: NotebookPanel): void {
|
||||
if (panel.content.contentFactory instanceof OpenCodeCellContentFactory) {
|
||||
return; // already installed
|
||||
}
|
||||
const existing = panel.content.contentFactory;
|
||||
const editorFactory = (existing as any).editorFactory;
|
||||
const factory = new OpenCodeCellContentFactory({ editorFactory });
|
||||
// contentFactory is readonly in the typings but writable at runtime.
|
||||
(panel.content as any).contentFactory = factory;
|
||||
}
|
||||
|
||||
export function installOpenCodeEverywhere(tracker: INotebookTracker): void {
|
||||
// Patch already-open notebooks.
|
||||
tracker.forEach(panel => {
|
||||
installOpenCodeInNotebook(panel);
|
||||
});
|
||||
// Patch future notebooks.
|
||||
tracker.widgetAdded.connect((_, panel) => {
|
||||
installOpenCodeInNotebook(panel);
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user