feat: add OpenCodeCellActions widget for the native Cell toolbar

2026-07-23 10:22:15 +08:00
parent 714a55653c
commit bb846d64fe
2 changed files with 340 additions and 0 deletions
@@ -0,0 +1,179 @@
+/**
+ * Per-cell actions widget rendered inside JupyterLab's native Cell toolbar
+ * (top-right of the active cell, next to the move up/down buttons).
+ *
+ * Registered in index.ts via IToolbarWidgetRegistry.addFactory('Cell', ...);
+ * the toolbar factory passes the owning Cell, so the cell arrives via the
+ * constructor instead of being resolved from `this.parent` on attach.
+ */
+import type { 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';
+
+export class OpenCodeCellActions extends Widget {
+  private _cell: CodeCell;
+  private _context: CellContext | null = null;
+  private _status: Status = 'idle';
+
+  constructor(cell: CodeCell) {
+    super();
+    this._cell = cell;
+    this.addClass('opencode-cell-actions');
+    this._cell.model.contentChanged.connect(this._onModelChange, this);
+    this._cell.model.stateChanged.connect(this._onModelChange, this);
+    this._onModelChange();
+  }
+
+  dispose(): void {
+    if (this.isDisposed) {
+      return;
+    }
+    this._cell.model.contentChanged.disconnect(this._onModelChange, this);
+    this._cell.model.stateChanged.disconnect(this._onModelChange, this);
+    super.dispose();
+  }
+
+  private _onModelChange(): void {
+    this._context = extractCellContextFromCell(this._cell);
+    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));
+  }
+
+  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._render();
+
+    try {
+      const resp = await callOpenCodeEdit(request, _serverSettings);
+      this._handleResponse(resp);
+    } catch (e) {
+      this._status = 'idle';
+      this._render();
+      Notification.error(`OpenCode ${mode} 失败: ${(e as Error).message}`);
+    }
+  }
+
+  private _handleResponse(resp: OpenCodeResponse): void {
+    this._status = 'idle';
+    this._render();
+    if (resp.ok) {
+      const len = resp.finalSource.length;
+      Notification.info(
+        `OpenCode ${resp.mode} 完成 (${len} chars). ` +
+          `Diff 面板将在 Slice 4 中提供。Session: ${resp.sessionId.slice(0, 8)}…`
+      );
+    } else {
+      Notification.error(`OpenCode 错误: ${resp.error}`);
+    }
+  }
+}
+
+/**
+ * Resolve a CodeCell's parent NotebookPanel by walking the parent chain,
+ * then build the CellContext. (Unchanged from the old footer helper; the
+ * `Widget.findParent` 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);
+}