@kabmo-labs/kabmo 0.8.0 → 0.9.0

package/src/client/components/workspace/chat-timeline/target-picker/index.tsx

@@ -1,260 +0,0 @@
-/**
- * @license
- * SPDX-License-Identifier: Apache-2.0
- */
-
-/**
- * Where a chat that has not started will run: the workspace, or one of the
- * workspace's worktrees.
- *
- * One control rather than two, because both answers are the same question. The
- * menu is grouped exactly as OpenChamber's draft target is — the project root
- * first, then the two ways to make a worktree, then the worktrees that already
- * exist — and creating one here means the user does not have to leave the draft
- * to get it.
- *
- * The pick is `{folderId, worktreePath}`: choosing a folder CLEARS the worktree
- * (the groups are mutually exclusive), while choosing a worktree keeps its
- * folder, so the row the composer draws can always name both.
- */
-
-import { useEffect, useMemo, useRef, useState } from 'preact/hooks';
-import { Check, ChevronDown, Folder, GitBranch } from 'lucide-preact';
-import { useOnClickOutside } from '@/client/hooks/ui/on-click-outside';
-import { useWorktrees } from '@/client/hooks/workspace/worktree/index';
-import type { SpawnTarget } from '@/client/hooks/chat/timeline/spawn-target';
-import { NewWorktreeModal } from '@/client/components/workspace/worktree-modal/index';
-import { createWorktree } from '@/client/hooks/workspace/worktree/index';
-import { lastPathSegment } from '@/shared/lib/fs/paths';
-import type { WorkspaceFolderData } from '@/shared/types';
-
-export interface TargetPickerProps {
-  folders: WorkspaceFolderData[];
-  selectedFolderId: number | null;
-  setSelectedFolderId: (id: number | null) => void;
-  target: SpawnTarget | null;
-  setTarget: (next: SpawnTarget | null) => void;
-  /**
-   * Reports a completed create/removal to the caller (a toast). Optional: the
-   * picker owns the flows, so a caller that only wants the pick needs nothing.
-   */
-  onReport?: (message: string) => void;
-}
-
-/** The trigger's words: the folder, plus the worktree when one is picked. */
-export function targetLabel(
-  folders: WorkspaceFolderData[],
-  selectedFolderId: number | null,
-  target: SpawnTarget | null,
-): string {
-  const folder = folders.find((candidate) => String(candidate.id) === String(selectedFolderId));
-  const name = folder?.name ?? 'Select Workspace Context';
-  const worktree = lastPathSegment(target?.worktreePath);
-  return worktree ? `${name} · ${worktree}` : name;
-}
-
-export function TargetPicker({
-  folders,
-  selectedFolderId,
-  setSelectedFolderId,
-  target,
-  setTarget,
-  onReport,
-}: TargetPickerProps) {
-  const [open, setOpen] = useState(false);
-  const [creating, setCreating] = useState(false);
-  const [dialogFolder, setDialogFolder] = useState<WorkspaceFolderData | null>(null);
-  const containerRef = useRef<HTMLDivElement>(null);
-  useOnClickOutside(containerRef, () => setOpen(false));
-
-  const selectedFolder = folders.find((candidate) => String(candidate.id) === String(selectedFolderId)) ?? null;
-  const scopeRoot = selectedFolder?.project_path ?? null;
-
-  // The list is read only while the menu is open: it costs a `git status` per
-  // worktree, and a closed picker must never pay for it.
-  const { worktrees, error, refresh } = useWorktrees(
-    { root: scopeRoot, folderId: selectedFolder?.id ?? null },
-    open && Boolean(scopeRoot),
-  );
-  useEffect(() => {
-    if (open) void refresh();
-  }, [open, refresh]);
-
-  const list = useMemo(() => worktrees.filter((worktree) => !worktree.isPrimary), [worktrees]);
-
-  const pickFolder = (folder: WorkspaceFolderData) => {
-    setSelectedFolderId(folder.id);
-    // A folder and a worktree are alternative answers, not a pair.
-    setTarget(null);
-    setOpen(false);
-  };
-
-  const pickWorktree = (folder: WorkspaceFolderData, worktreePath: string) => {
-    setSelectedFolderId(folder.id);
-    setTarget({ folderId: Number(folder.id), worktreePath });
-    setOpen(false);
-  };
-
-  /**
-   * Quick worktree: a generated branch and folder, created and selected without
-   * leaving the draft. Reported rather than silent — the create takes a moment
-   * and a pick that changed with no word reads as a mis-click.
-   */
-  const quickWorktree = async (folder: WorkspaceFolderData) => {
-    if (!folder.project_path) return;
-    setCreating(true);
-    try {
-      const created = await createWorktree(
-        { root: folder.project_path, folderId: folder.id },
-        { mode: 'new' },
-      );
-      pickWorktree(folder, created.path);
-      onReport?.(`Worktree ${created.branch || lastPathSegment(created.path)} created`);
-    } catch (error) {
-      onReport?.(error instanceof Error ? error.message : String(error));
-    } finally {
-      setCreating(false);
-    }
-  };
-
-  return (
-    <div className="relative shrink-0" ref={containerRef}>
-      <button
-        type="button"
-        onClick={() => setOpen((value) => !value)}
-        aria-haspopup="menu"
-        aria-expanded={open}
-        className="group flex items-center space-x-1.5 px-1.5 py-1 rounded-md text-xs font-medium text-ink/75 hover:text-ink hover:bg-ink/5 focus-visible:bg-ink/5 transition-all outline-none cursor-pointer select-none"
-      >
-        {target?.worktreePath ? (
-          <GitBranch size={13} className="text-ink/50 group-hover:text-ink/80 transition-colors flex-shrink-0" />
-        ) : (
-          <Folder size={13} className="text-ink/50 group-hover:text-ink/80 transition-colors flex-shrink-0" />
-        )}
-        <span className="flex items-center space-x-1 max-w-[260px] truncate tracking-tight">
-          <span>{targetLabel(folders, selectedFolderId, target)}</span>
-        </span>
-        <ChevronDown
-          size={13}
-          className={`text-ink/40 group-hover:text-ink/70 flex-shrink-0 transition-transform duration-150 ${open ? 'rotate-180 text-ink/70' : ''}`}
-        />
-      </button>
-
-      {open && (
-        <div
-          role="menu"
-          className="absolute bottom-full left-0 mb-1.5 w-72 bg-paper border border-ink/10 rounded-lg shadow-lg z-50 flex flex-col overflow-hidden text-xs py-1"
-        >
-          <div className="px-3 py-1.5 text-[10px] uppercase tracking-wider text-ink/40 font-semibold border-b border-ink/5">
-            Project root
-          </div>
-          <div className="max-h-56 scrollbar-overlay-container py-1">
-            {folders.length === 0 ? (
-              <div className="px-3 py-2 text-ink/40 italic">No workspaces available</div>
-            ) : (
-              folders.map((folder) => (
-                <button
-                  key={folder.id}
-                  type="button"
-                  role="menuitemradio"
-                  aria-checked={selectedFolderId === folder.id && !target?.worktreePath}
-                  onClick={() => pickFolder(folder)}
-                  className={`w-full text-left px-3 py-1.5 flex items-center justify-between transition-colors cursor-pointer ${
-                    selectedFolderId === folder.id && !target?.worktreePath
-                      ? 'bg-ink/10 text-ink font-semibold'
-                      : 'text-ink/80 hover:bg-ink/5 hover:text-ink'
-                  }`}
-                >
-                  <span className="flex items-center space-x-2 truncate pr-2">
-                    <Folder size={12} className={selectedFolderId === folder.id ? 'text-ink flex-shrink-0' : 'text-ink/50 flex-shrink-0'} />
-                    <span className="truncate font-medium">{folder.name}</span>
-                  </span>
-                  {selectedFolderId === folder.id && !target?.worktreePath && <Check size={12} className="text-ink flex-shrink-0" />}
-                </button>
-              ))
-            )}
-          </div>
-
-          {/* Making one comes before the list, so a long list never hides it. */}
-          {selectedFolder && scopeRoot && (
-            <>
-              <div className="border-t border-ink/5 px-3 py-1.5 text-[10px] uppercase tracking-wider text-ink/40 font-semibold">
-                Worktrees
-              </div>
-              <button
-                type="button"
-                role="menuitem"
-                disabled={creating}
-                onClick={() => void quickWorktree(selectedFolder)}
-                className="w-full text-left px-3 py-1.5 flex items-center gap-2 text-ink/80 hover:bg-ink/5 hover:text-ink disabled:opacity-50"
-              >
-                <span aria-hidden="true">⚡</span>
-                {creating ? 'Creating…' : 'Quick worktree'}
-              </button>
-              <button
-                type="button"
-                role="menuitem"
-                onClick={() => {
-                  setOpen(false);
-                  setDialogFolder(selectedFolder);
-                }}
-                className="w-full text-left px-3 py-1.5 flex items-center gap-2 text-ink/80 hover:bg-ink/5 hover:text-ink"
-              >
-                <GitBranch size={12} className="text-ink/50" />
-                New worktree…
-              </button>
-              <div className="max-h-56 scrollbar-overlay-container py-1">
-                {list.length === 0 ? (
-                  <div className="px-3 py-2 text-ink/40 italic">
-                    {error ? 'Worktrees could not be read' : 'No worktrees yet'}
-                  </div>
-                ) : (
-                  list.map((worktree) => (
-                    <button
-                      key={worktree.path}
-                      type="button"
-                      role="menuitemradio"
-                      aria-checked={target?.worktreePath === worktree.path}
-                      onClick={() => pickWorktree(selectedFolder, worktree.path)}
-                      title={worktree.path}
-                      className={`w-full text-left px-3 py-1.5 flex items-center justify-between transition-colors cursor-pointer ${
-                        target?.worktreePath === worktree.path
-                          ? 'bg-ink/10 text-ink font-semibold'
-                          : 'text-ink/80 hover:bg-ink/5 hover:text-ink'
-                      }`}
-                    >
-                      <span className="flex items-center gap-2 truncate pr-2">
-                        <GitBranch size={12} className="text-ink/50 flex-shrink-0" />
-                        <span className="truncate font-medium">{worktree.branch || 'detached'}</span>
-                        {worktree.missing && <span className="text-warning shrink-0">missing</span>}
-                        {worktree.dirty > 0 && (
-                          <span className="text-ink/40 shrink-0" title={`${worktree.dirty} uncommitted files`}>
-                            ●{worktree.dirty}
-                          </span>
-                        )}
-                      </span>
-                      {target?.worktreePath === worktree.path && <Check size={12} className="text-ink flex-shrink-0" />}
-                    </button>
-                  ))
-                )}
-              </div>
-            </>
-          )}
-        </div>
-      )}
-
-      <NewWorktreeModal
-        isOpen={dialogFolder !== null}
-        onClose={() => setDialogFolder(null)}
-        root={dialogFolder?.project_path ?? null}
-        folderId={dialogFolder ? Number(dialogFolder.id) : null}
-        folderName={dialogFolder?.name}
-        onCreated={(created) => {
-          if (!dialogFolder) return;
-          pickWorktree(dialogFolder, created.path);
-          onReport?.(`Worktree ${created.branch} created`);
-        }}
-      />
-    </div>
-  );
-}

package/src/client/components/workspace/diff-panel/SplitView.tsx

@@ -1,209 +0,0 @@
-import { useMemo } from 'preact/hooks';
-import type { SplitDiffRow } from '@/shared/lib/fs/diff-parser';
-import { highlightLines } from '@/shared/lib/code/syntax-highlight';
-import { useSyntaxReady } from '@/client/hooks/ui/syntax-ready';
-import { useScrollRestore } from '@/client/hooks/editor/use-scroll-restore';
-
-interface SplitViewProps {
-  rows: SplitDiffRow[];
-  language: string;
-  /** Wrap long lines instead of scrolling horizontally. */
-  wordWrap: boolean;
-  /**
-   * The diff tab these rows belong to, so its scroll offset is remembered — or
-   * null for a caller with no tab of its own (a diff inside a chat tool card,
-   * where the timeline owns the scrolling).
-   */
-  tabKey: string | null;
-}
-
-export function SplitView({ rows, language, wordWrap, tabKey }: SplitViewProps) {
-  const syntaxReady = useSyntaxReady();
-  // Its own offset: split rows and unified lines are different heights, and
-  // switching shape must not carry one view's position onto the other's rows.
-  const scroll = useScrollRestore({ tabKey, surface: 'split' });
-
-  const htmlByIndex = useMemo(() => {
-    const left = new Array<string>(rows.length).fill('');
-    const right = new Array<string>(rows.length).fill('');
-    let start = -1;
-    const flush = (end: number) => {
-      if (start < 0) return;
-      const group = rows.slice(start, end);
-      const leftHtml = highlightLines(group.map((r) => r.left?.text ?? '').join('\n'), language);
-      const rightHtml = highlightLines(group.map((r) => r.right?.text ?? '').join('\n'), language);
-      for (let i = start; i < end; i++) {
-        left[i] = leftHtml[i - start] ?? '';
-        right[i] = rightHtml[i - start] ?? '';
-      }
-      start = -1;
-    };
-    rows.forEach((row, idx) => {
-      if (row.isMeta) flush(idx);
-      else if (start < 0) start = idx;
-    });
-    flush(rows.length);
-    return { left, right };
-  }, [rows, language, syntaxReady]);
-
-  if (rows.length === 0) {
-    return (
-      <div className="flex-1 flex items-center justify-center text-ink/40 font-mono text-xs p-8">
-        No differences between working file and target.
-      </div>
-    );
-  }
-
-  return (
-    <div
-      ref={scroll.ref}
-      onScroll={scroll.onScroll}
-      data-testid="diff-scroller"
-      className="w-full h-full overflow-auto font-mono text-xs select-text bg-paper text-ink code-surface"
-    >
-      {/* The room under the last row belongs to the content, not the scroller:
-          a scroll container's own bottom padding is not part of its scrollable
-          overflow, so the padding has to sit inside it to have any effect. */}
-      <div className={`pb-4 ${wordWrap ? 'w-full' : 'w-max min-w-full min-w-[700px]'}`}>
-        <div className="grid grid-cols-2 sticky top-0 z-10 bg-canvas border-b border-ink/10 text-[11px] text-ink/70 font-sans select-none shadow-xs">
-          <div className="px-3 py-1 font-medium border-r border-ink/10 flex items-center justify-between">
-            <span>Original (HEAD / Base)</span>
-          </div>
-          <div className="px-3 py-1 font-medium flex items-center justify-between">
-            <span>Modified (Working Tree)</span>
-          </div>
-        </div>
-
-        {/* Wrap needs `table-fixed`: auto layout sizes a column by its widest
-            cell's UNAMBIGUOUS minimum (`overflow-wrap: break-word` does not
-            lower it), so a long line would widen the table and scroll instead of
-            wrapping. Fixed layout takes its widths from the FIRST row — which
-            here is the `colSpan={4}` meta row, so every column came out equal
-            (measured 99px) and the line-number gutters grew to the width of a
-            code column. The colgroup states them instead: two 48px gutters and
-            the two content columns sharing the rest. */}
-        <table className={`border-collapse ${wordWrap ? 'table-fixed w-full' : 'w-full'}`}>
-          {wordWrap && (
-            <colgroup>
-              <col className="w-12" />
-              <col />
-              <col className="w-12" />
-              <col />
-            </colgroup>
-          )}
-          <tbody>
-            {rows.map((row, idx) => {
-              if (row.isMeta) {
-                return (
-                  <tr key={idx} className="bg-canvas border-y border-ink/10 text-meta select-none">
-                    <td colSpan={4} className="py-1 px-3 text-[11px] font-semibold text-meta text-center font-mono">
-                      {row.metaText}
-                    </td>
-                  </tr>
-                );
-              }
-
-              const left = row.left;
-              const right = row.right;
-
-              const isLeftDel = left?.type === 'del';
-              const isRightAdd = right?.type === 'add';
-
-              return (
-                <tr key={idx} className="border-b border-ink/[0.04]">
-                  {/* Left Line Number */}
-                  <td
-                    className={`w-12 py-0.5 px-2 text-right text-[10px] select-none border-r border-ink/10 font-mono ${
-                      wordWrap ? 'align-top' : ''
-                    } ${
-                      isLeftDel
-                        ? 'bg-error/15 text-error font-semibold'
-                        : left
-                        ? 'bg-canvas/50 text-ink/40'
-                        : 'bg-canvas/80 text-transparent'
-                    }`}
-                  >
-                    {left?.lineNumber || ''}
-                  </td>
-
-                  {/* Left Content (Original) */}
-                  <td
-                    className={`py-0.5 px-2 border-r border-ink/10 text-ink ${
-                      wordWrap ? 'whitespace-pre-wrap break-words align-top' : 'min-w-[320px] whitespace-pre'
-                    } ${
-                      isLeftDel
-                        ? 'bg-error/10'
-                        : left
-                        ? 'hover:bg-ink/[0.02]'
-                        : 'bg-canvas/40 select-none'
-                    }`}
-                  >
-                    {left ? (
-                      <>
-                        <span className={`inline-block w-4 text-center select-none font-bold ${isLeftDel ? 'text-error' : 'opacity-0'}`}>
-                          {isLeftDel ? '-' : ' '}
-                        </span>
-                        <span
-                          className="shiki"
-                          dangerouslySetInnerHTML={{
-                            __html: left.text ? htmlByIndex.left[idx] || '&nbsp;' : '&nbsp;',
-                          }}
-                        />
-                      </>
-                    ) : (
-                      <span className="opacity-0">&nbsp;</span>
-                    )}
-                  </td>
-
-                  {/* Right Line Number */}
-                  <td
-                    className={`w-12 py-0.5 px-2 text-right text-[10px] select-none border-r border-ink/10 font-mono ${
-                      wordWrap ? 'align-top' : ''
-                    } ${
-                      isRightAdd
-                        ? 'bg-success/15 text-success font-semibold'
-                        : right
-                        ? 'bg-canvas/50 text-ink/40'
-                        : 'bg-canvas/80 text-transparent'
-                    }`}
-                  >
-                    {right?.lineNumber || ''}
-                  </td>
-
-                  {/* Right Content (Modified) */}
-                  <td
-                    className={`py-0.5 px-2 text-ink ${
-                      wordWrap ? 'whitespace-pre-wrap break-words align-top' : 'min-w-[320px] whitespace-pre'
-                    } ${
-                      isRightAdd
-                        ? 'bg-success/10'
-                        : right
-                        ? 'hover:bg-ink/[0.02]'
-                        : 'bg-canvas/40 select-none'
-                    }`}
-                  >
-                    {right ? (
-                      <>
-                        <span className={`inline-block w-4 text-center select-none font-bold ${isRightAdd ? 'text-success' : 'opacity-0'}`}>
-                          {isRightAdd ? '+' : ' '}
-                        </span>
-                        <span
-                          className="shiki"
-                          dangerouslySetInnerHTML={{
-                            __html: right.text ? htmlByIndex.right[idx] || '&nbsp;' : '&nbsp;',
-                          }}
-                        />
-                      </>
-                    ) : (
-                      <span className="opacity-0">&nbsp;</span>
-                    )}
-                  </td>
-                </tr>
-              );
-            })}
-          </tbody>
-        </table>
-      </div>
-    </div>
-  );
-}

package/src/client/components/workspace/diff-panel/UnifiedView.tsx

@@ -1,150 +0,0 @@
-import { useMemo } from 'preact/hooks';
-import type { DiffLine } from '@/shared/lib/fs/diff-parser';
-import { highlightLines } from '@/shared/lib/code/syntax-highlight';
-import { useSyntaxReady } from '@/client/hooks/ui/syntax-ready';
-import { useScrollRestore } from '@/client/hooks/editor/use-scroll-restore';
-
-interface UnifiedViewProps {
-  lines: DiffLine[];
-  language: string;
-  /** Wrap long lines instead of scrolling horizontally. */
-  wordWrap: boolean;
-  /**
-   * The diff tab these rows belong to, so its scroll offset is remembered — or
-   * null for a caller with no tab of its own (a diff inside a chat tool card,
-   * where the timeline owns the scrolling).
-   */
-  tabKey: string | null;
-}
-
-export function UnifiedView({ lines, language, wordWrap, tabKey }: UnifiedViewProps) {
-  const syntaxReady = useSyntaxReady();
-  // The unified and split shapes are different row counts and heights for the
-  // same diff, so each keeps its own offset (see `ScrollSurface`).
-  const scroll = useScrollRestore({ tabKey, surface: 'unified' });
-
-  const htmlByIndex = useMemo(() => {
-    const out = new Array<string>(lines.length).fill('');
-    let start = -1;
-    const flush = (end: number) => {
-      if (start < 0) return;
-      const html = highlightLines(lines.slice(start, end).map((l) => l.text).join('\n'), language);
-      for (let i = start; i < end; i++) out[i] = html[i - start] ?? '';
-      start = -1;
-    };
-    lines.forEach((line, idx) => {
-      if (line.type === 'meta') flush(idx);
-      else if (start < 0) start = idx;
-    });
-    flush(lines.length);
-    return out;
-  }, [lines, language, syntaxReady]);
-
-  if (lines.length === 0) {
-    return (
-      <div className="flex-1 flex items-center justify-center text-ink/40 font-mono text-xs p-8">
-        No differences between working file and target.
-      </div>
-    );
-  }
-
-  return (
-    <div
-      ref={scroll.ref}
-      onScroll={scroll.onScroll}
-      data-testid="diff-scroller"
-      className="w-full h-full overflow-auto font-mono text-xs select-text bg-paper text-ink code-surface"
-    >
-      {/* The room under the last row belongs to the content, not the scroller:
-          a scroll container's own bottom padding is not part of its scrollable
-          overflow, so the padding has to sit inside it to have any effect. */}
-      <div className={`pb-4 ${wordWrap ? 'w-full' : 'w-max min-w-full'}`}>
-        {/* Wrap needs `table-fixed`: auto layout sizes a column by its widest
-            cell's UNAMBIGUOUS minimum (`overflow-wrap: break-word` does not
-            lower it), so a long line would still widen the table and scroll
-            instead of wrapping. Fixed layout takes the width from the row's
-            own box, which is what makes the cell's wrap rule effective. */}
-        <table className={`border-collapse ${wordWrap ? 'table-fixed w-full' : 'w-max min-w-full'}`}>
-          <tbody>
-            {lines.map((line, idx) => {
-              if (line.type === 'meta') {
-                return (
-                  <tr key={idx} className="bg-canvas border-y border-ink/10 text-meta select-none">
-                    <td className="w-12 text-center py-1 px-2 text-[10px] opacity-60 border-r border-ink/10 font-mono">...</td>
-                    <td className="w-12 text-center py-1 px-2 text-[10px] opacity-60 border-r border-ink/10 font-mono">...</td>
-                    <td className="py-1 px-3 text-[11px] font-semibold text-meta font-mono tracking-tight">{line.text}</td>
-                  </tr>
-                );
-              }
-
-              const isAdd = line.type === 'add';
-              const isDel = line.type === 'del';
-
-              return (
-                <tr
-                  key={idx}
-                  className={`transition-colors group ${
-                    isAdd
-                      ? 'bg-success/10 hover:bg-success/15'
-                      : isDel
-                      ? 'bg-error/10 hover:bg-error/15'
-                      : 'hover:bg-ink/[0.03]'
-                  }`}
-                >
-                  {/* Old line number. Top-aligned when the row wraps, or the
-                      number would float to the middle of a multi-line cell
-                      instead of naming its first line. */}
-                  <td
-                    className={`w-12 py-0.5 px-2 text-right text-[10px] select-none border-r border-ink/10 font-mono ${
-                      wordWrap ? 'align-top' : ''
-                    } ${
-                      isDel
-                        ? 'bg-error/15 text-error font-semibold'
-                        : isAdd
-                        ? 'bg-success/15 text-success/70'
-                        : 'bg-canvas/50 text-ink/40'
-                    }`}
-                  >
-                    {line.oldLineNumber || ''}
-                  </td>
-
-                  {/* New line number */}
-                  <td
-                    className={`w-12 py-0.5 px-2 text-right text-[10px] select-none border-r border-ink/10 font-mono ${
-                      wordWrap ? 'align-top' : ''
-                    } ${
-                      isAdd
-                        ? 'bg-success/15 text-success font-semibold'
-                        : isDel
-                        ? 'bg-error/15 text-error/70'
-                        : 'bg-canvas/50 text-ink/40'
-                    }`}
-                  >
-                    {line.newLineNumber || ''}
-                  </td>
-
-                  {/* Change prefix & code text */}
-                  <td className={`py-0.5 px-3 text-ink pr-6 ${wordWrap ? 'whitespace-pre-wrap break-words align-top' : 'whitespace-pre'}`}>
-                    <span
-                      className={`inline-block w-4 text-center select-none font-bold ${
-                        isAdd ? 'text-success' : isDel ? 'text-error' : 'opacity-0'
-                      }`}
-                    >
-                      {isAdd ? '+' : isDel ? '-' : ' '}
-                    </span>
-                    <span
-                      className="shiki"
-                      dangerouslySetInnerHTML={{
-                        __html: line.text ? htmlByIndex[idx] || '&nbsp;' : '&nbsp;',
-                      }}
-                    />
-                  </td>
-                </tr>
-              );
-            })}
-          </tbody>
-        </table>
-      </div>
-    </div>
-  );
-}