omp-edit/client.js

// omp-edit Web client: render hashline / patch edits as DSH's native diff card.
//
// The stock `edit` row derives its diff from `file_path` + `old_string`/`new_string` arguments.
// Hashline, sloppy and apply_patch calls carry one `input` string instead, so the stock row falls
// back to raw text. This keyed toolview (priority -1 shadows the stock one) renders the applied
// hunks the host already persists in `meta.diffs` with the shared DiffBlock primitive.
window.__ModuleLoader__.load({
  id: '@local/omp-edit',
  factory(require) {
    const React = require('react');
    const P = require('@deepseek-ai/dsh-client-ui-primitives');
    const h = React.createElement;

    const CSS = `
.ompe-row{display:flex;flex-direction:column;gap:6px;min-width:0}
.ompe-head{display:flex;align-items:center;gap:6px;min-width:0;height:24px;padding:0 4px;border:0;background:none;color:var(--dsw-alias-label-secondary);font:inherit;font-size:13px;cursor:pointer;border-radius:var(--dsw-radius-sm);text-align:left}
.ompe-head:hover{background:var(--dsw-alias-interactive-bg-hover)}
.ompe-title{color:var(--dsw-alias-label-primary);flex:none}
.ompe-sum{color:var(--dsw-alias-label-caption);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ompe-add{color:var(--dsw-alias-state-success,#3fb950);flex:none}
.ompe-del{color:var(--dsw-alias-state-danger,#f85149);flex:none}
.ompe-err{color:var(--dsw-alias-state-danger,#f85149)}
.ompe-text{margin:0;padding:8px;border-radius:var(--dsw-radius-md);background:var(--dsw-alias-bg-l2,rgba(127,127,127,.08));white-space:pre-wrap;font:12px/1.5 var(--dsw-font-mono,ui-monospace,monospace);color:var(--dsw-alias-label-secondary);max-height:320px;overflow:auto}
`;
    let cssDone = false;
    const installCss = () => {
      if (cssDone || typeof document === 'undefined') return;
      const s = document.createElement('style');
      s.dataset.ompEdit = '';
      s.textContent = CSS;
      document.head.appendChild(s);
      cssDone = true;
    };

    const Icon = P.IconEditOutlineRegular || (() => null);
    const Chevron = P.IconChevronRightOutlineRegular || (() => null);

    function readDiffs(meta) {
      const d = meta && typeof meta === 'object' && Array.isArray(meta.diffs) ? meta.diffs : [];
      return d.filter((x) => x && typeof x.path === 'string' && typeof x.newText === 'string' && (x.oldText === null || typeof x.oldText === 'string'));
    }

    function countLines(diffs) {
      // Approximate +/- counts from hunk texts (context lines are shared by both sides).
      let add = 0; let del = 0;
      for (const d of diffs) {
        const a = d.oldText === null ? [] : d.oldText.split('\n');
        const b = d.newText.split('\n');
        const common = new Set(a.filter((l) => b.includes(l)));
        add += b.filter((l) => !common.has(l)).length;
        del += a.filter((l) => !common.has(l)).length;
      }
      return { add, del };
    }

    function argsSummary(argsRaw) {
      try {
        const a = JSON.parse(argsRaw || '{}');
        if (typeof a.file_path === 'string') return a.file_path;
        if (typeof a.input === 'string') {
          const files = [...a.input.matchAll(/^\[(.+?)#[0-9A-Fa-f]{4}\]\s*$/gm)].map((m) => m[1]);
          const more = [...a.input.matchAll(/^\*\*\* (?:Edit|Update|Add|Delete) File:\s*(.+?)(?:\s+all)?\s*$/gm)].map((m) => m[1]);
          return [...new Set([...files, ...more])].join(', ');
        }
      } catch { /* partial arguments */ }
      return '';
    }

    const labels = (t) => ({
      codeLabel: t('code') || 'Code', wrapLabel: t('wrap') || 'Wrap', unwrapLabel: t('unwrap') || 'No wrap',
      copy: t('copy') || 'Copy', copied: t('copied') || 'Copied',
      collapseAria: 'Collapse', expandAria: (n) => `Show ${n} more lines`, collapse: t('collapse') || 'Collapse', expand: (n) => `Show ${n} more lines`,
    });

    function EditRow(props) {
      const { block, t, phase } = props;
      React.useEffect(installCss, []);
      const [open, setOpen] = React.useState(true);
      const done = block && 'kind' in block;
      const diffs = done && !block.isError ? readDiffs(block.meta) : [];
      const argsRaw = block?.call?.argsRaw ?? block?.argsRaw ?? '';
      const files = diffs.length ? [...new Set(diffs.map((d) => d.path))].join(', ') : argsSummary(argsRaw);
      const { add, del } = countLines(diffs);
      const text = done && Array.isArray(block.content) ? block.content.filter((c) => c.type === 'text').map((c) => c.text).join('\n') : '';
      const running = !done || phase === 'preparing';
      const title = (typeof t === 'function' && t('tool.title.edit')) || 'Edit';
      return h('div', { className: 'ompe-row' },
        h('button', { type: 'button', className: 'ompe-head', onClick: () => setOpen((v) => !v), 'aria-expanded': open },
          h('span', { style: { transform: open ? 'rotate(90deg)' : 'none', transition: 'transform .12s', display: 'inline-flex' } }, h(Chevron, { size: 12 })),
          h(Icon, { size: 14 }),
          h('span', { className: 'ompe-title' }, running ? `${title}…` : title),
          files ? h('span', { className: 'ompe-sum' }, files) : null,
          diffs.length ? h('span', { className: 'ompe-add' }, `+${add}`) : null,
          diffs.length ? h('span', { className: 'ompe-del' }, `-${del}`) : null,
          done && block.isError ? h('span', { className: 'ompe-err' }, '✕') : null),
        open && diffs.length && P.DiffBlock
          ? h(P.DiffBlock, { diffs, labels: labels(typeof t === 'function' ? t : () => ''), maxLines: 24 })
          : open && done && text
            ? h('pre', { className: `ompe-text${block.isError ? ' ompe-err' : ''}` }, text)
            : null);
    }

    return {
      inject: ['slots'],
      apply(ctx) {
        ctx.slots.inject('tool.call.toolview', () => ctx.slots.register({
          name: 'tool.call.toolview',
          key: 'edit',
          locale: 'conversation',
          priority: -1,
        }, EditRow));
      },
    };
  },
});