ompchamber 0.3.0

package/src/client/components/workspace/context-panel/index.tsx

@@ -0,0 +1,142 @@
+import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
+import { useSearchParams } from '@/client/lib/router/search-params';
+import type { SessionContextTelemetry } from '@/shared/types';
+import { emptyTelemetry } from '@/client/data/context-data';
+import { ContextWindowCard } from '@/client/components/workspace/context-panel/WindowCard';
+import { ContextStatsGrid } from '@/client/components/workspace/context-panel/StatsGrid';
+import { LastMessageCard } from '@/client/components/workspace/context-panel/LastMessageCard';
+import { TokenDistributionBar } from '@/client/components/workspace/context-panel/TokenDistributionBar';
+import { RawMessagesList } from '@/client/components/workspace/context-panel/RawMessagesList';
+import { useScrollbarFade, scrollbarFadeClass } from '@/client/hooks/ui/scrollbar-fade';
+import { usePanelRefresh, useFileMutationRefresh } from '@/client/hooks/workspace/panel-refresh';
+
+interface ContextPanelProps {
+  className?: string;
+  enabled?: boolean;
+  refreshKey?: number;
+  onClose?: () => void;
+}
+
+export function ContextPanel({
+  className = '',
+  enabled = true,
+  refreshKey = 0
+}: ContextPanelProps) {
+  const [searchParams] = useSearchParams();
+  const sessionId = searchParams.get('sessionId');
+  const { isScrolling, handleScroll } = useScrollbarFade();
+
+  const [telemetry, setTelemetry] = useState<SessionContextTelemetry>(() =>
+    emptyTelemetry(sessionId || 'default', 'Session not started')
+  );
+
+  // Bound to the current session and live until unmount so the auto-refresh
+  // interval below can re-read it without being torn down per render.
+  const cancelledRef = useRef(false);
+  const loadTelemetry = useCallback(() => {
+    if (typeof window === 'undefined') return;
+    const param = sessionId ? `?sessionId=${encodeURIComponent(sessionId)}` : '';
+    fetch(`/api/telemetry/context${param}`)
+      .then((res) => (res.ok ? res.json() : null))
+      .then((data) => {
+        if (!cancelledRef.current && data && data.telemetry) {
+          setTelemetry(data.telemetry);
+        }
+      })
+      .catch((err) => {
+        if (!cancelledRef.current) {
+          console.warn('Failed to fetch context telemetry:', err);
+        }
+      });
+  }, [sessionId]);
+
+  useEffect(() => {
+    cancelledRef.current = false;
+    if (!enabled) return;
+    loadTelemetry();
+    return () => {
+      cancelledRef.current = true;
+    };
+  }, [enabled, refreshKey, loadTelemetry]);
+
+  // Auto refresh: telemetry (context usage, tokens, cost) advances per
+  // assistant turn — re-read on a short cadence so the panel tracks it without
+  // the user switching panels.
+  usePanelRefresh(loadTelemetry, enabled);
+  // An AI turn can advance token/cost telemetry mid-poll-cycle: re-read right
+  // after a file-mutating tool (edit / write / ast_edit / bash) completes.
+  useFileMutationRefresh(loadTelemetry, enabled);
+
+  if (!enabled) {
+    return (
+      <div className={`flex flex-col h-full bg-paper items-center justify-center text-ink/40 ${className}`}>
+        <span className="text-xs font-mono">No session selected</span>
+      </div>
+    );
+  }
+
+  if (telemetry.messagesCount === 0) {
+    return (
+      <div className={`flex flex-col h-full bg-paper items-center justify-center text-ink/40 ${className}`}>
+        <span className="text-xs font-mono">Session not started</span>
+      </div>
+    );
+  }
+
+  return (
+    <div className={`flex flex-col h-full bg-paper text-ink overflow-hidden select-none ${className}`}>
+      {/* Top Header without action buttons */}
+      <div className="flex-shrink-0 p-4 border-b border-ink/10 bg-paper">
+        <div>
+          <h2 className="text-xs font-medium text-ink tracking-tight truncate">
+            {telemetry.sessionTitle}
+          </h2>
+          <div className="text-[11px] text-ink/50 mt-1 truncate font-mono">
+            {telemetry.timestamp}
+          </div>
+        </div>
+      </div>
+
+      {/* Scrollable Context Body */}
+      <div onScroll={handleScroll} className={`flex-1 scrollbar-overlay-container p-4 space-y-4 ${scrollbarFadeClass(isScrolling)}`}>
+        {/* 1. Context Window Usage Progress Card */}
+        <ContextWindowCard
+          used={telemetry.contextUsed}
+          limit={telemetry.contextLimit}
+          percent={telemetry.contextPercent}
+        />
+
+        {/* 2. Metric Row (Messages, User, Assistant, Cache Hit, Cost + detail) */}
+        <ContextStatsGrid
+          messagesCount={telemetry.messagesCount}
+          userCount={telemetry.userCount}
+          assistantCount={telemetry.assistantCount}
+          costFormatted={telemetry.costFormatted}
+          cacheHitAverage={telemetry.cacheHitAverage}
+          costBreakdown={telemetry.costBreakdown}
+        />
+
+        {/* 3. Last Assistant Message Stats */}
+        <LastMessageCard
+          input={telemetry.lastMessage.input}
+          output={telemetry.lastMessage.output}
+          reasoning={telemetry.lastMessage.reasoning}
+          cacheRead={telemetry.lastMessage.cacheRead}
+          cacheWrite={telemetry.lastMessage.cacheWrite}
+          cacheHitPercent={telemetry.lastMessage.cacheHitPercent}
+        />
+
+        {/* 4. Token Distribution Segmented Bar */}
+        <TokenDistributionBar
+          userPercent={telemetry.distribution.userPercent}
+          assistantPercent={telemetry.distribution.assistantPercent}
+          toolPercent={telemetry.distribution.toolPercent}
+          otherPercent={telemetry.distribution.otherPercent}
+        />
+
+        {/* 5. Raw Messages List (server-side paged) */}
+        <RawMessagesList sessionId={sessionId} refreshKey={refreshKey} />
+      </div>
+    </div>
+  );
+}

package/src/client/components/workspace/context-panel/raw-messages.ts

@@ -0,0 +1,54 @@
+export const MODEL_COLORS = [
+  'bg-emerald-500',
+  'bg-sky-500',
+  'bg-amber-500',
+  'bg-violet-500',
+  'bg-rose-500',
+  'bg-teal-500',
+  'bg-indigo-500',
+  'bg-fuchsia-500',
+  'bg-lime-500',
+  'bg-cyan-500',
+  'bg-orange-500',
+  'bg-pink-500',
+  'bg-yellow-500',
+  'bg-purple-500',
+  'bg-red-500',
+  'bg-blue-500',
+  'bg-green-500',
+  'bg-cyan-600',
+  'bg-violet-600',
+  'bg-amber-600',
+];
+
+export const PAGE_SIZE = 20;
+
+export function hashModel(id: string): number {
+  let h = 0;
+  for (let i = 0; i < id.length; i++) h = (h * 31 + id.charCodeAt(i)) | 0;
+  return Math.abs(h);
+}
+
+export function modelLabel(id: string): string {
+  const slash = id.indexOf('/');
+  const provider = slash > 0 ? id.slice(0, slash) : id;
+  const model = slash > 0 ? id.slice(slash + 1) : '';
+  return model ? `${provider} · ${model}` : provider;
+}
+
+/** Condensed page list: 1 … around-current … last, with ellipsis gaps. */
+export function pageWindow(current: number, total: number): (number | '…')[] {
+  if (total <= 7) return Array.from({ length: total }, (_, i) => i + 1);
+  const pages = new Set<number>([1, total, current, current - 1, current + 1]);
+  if (current <= 3) [2, 3, 4].forEach(p => pages.add(p));
+  if (current >= total - 2) [total - 3, total - 2, total - 1].forEach(p => pages.add(p));
+  const sorted = [...pages].filter(p => p >= 1 && p <= total).sort((a, b) => a - b);
+  const out: (number | '…')[] = [];
+  let prev = 0;
+  for (const p of sorted) {
+    if (p - prev > 1) out.push('…');
+    out.push(p);
+    prev = p;
+  }
+  return out;
+}

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

@@ -0,0 +1,165 @@
+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';
+
+interface SplitViewProps {
+  rows: SplitDiffRow[];
+  language: string;
+}
+
+export function SplitView({ rows, language }: SplitViewProps) {
+  const syntaxReady = useSyntaxReady();
+
+  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 className="w-full h-full overflow-auto font-mono text-xs select-text bg-paper text-ink code-surface">
+      <div className="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>
+
+        <table className="w-full border-collapse">
+          <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 ${
+                      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={`min-w-[320px] py-0.5 px-2 whitespace-pre border-r border-ink/10 text-ink ${
+                      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 ${
+                      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={`min-w-[320px] py-0.5 px-2 whitespace-pre text-ink ${
+                      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/Toolbar.tsx

@@ -0,0 +1,177 @@
+import { AlignJustify, Check, Code2, Columns, Copy, Minus, Plus, RefreshCw, Space, Undo2 } from 'lucide-preact';
+import { FileIcon } from '@/client/components/common/file-icon';
+import { getGitStatusInfo } from '@/shared/lib/fs/git-status';
+
+interface DiffToolbarProps {
+  filePath: string;
+  status: string;
+  isStaged: boolean;
+  viewMode: 'unified' | 'split';
+  ignoreWhitespace: boolean;
+  additions: number;
+  deletions: number;
+  isLoading: boolean;
+  isCopied: boolean;
+  onToggleViewMode: () => void;
+  onToggleWhitespace: () => void;
+  onStageUnstage: () => void;
+  onDiscard: () => void;
+  onOpenInEditor?: () => void;
+  onRefresh: () => void;
+  onCopyDiff: () => void;
+}
+
+export function DiffToolbar({
+  filePath,
+  status,
+  isStaged,
+  viewMode,
+  ignoreWhitespace,
+  additions,
+  deletions,
+  isLoading,
+  isCopied,
+  onToggleViewMode,
+  onToggleWhitespace,
+  onStageUnstage,
+  onDiscard,
+  onOpenInEditor,
+  onRefresh,
+  onCopyDiff,
+}: DiffToolbarProps) {
+  const fileName = filePath.split('/').pop() || filePath;
+  const statusInfo = getGitStatusInfo(status, isStaged);
+
+  return (
+    <div className="flex items-center justify-between px-3 py-1.5 bg-paper border-b border-ink/10 text-xs font-sans select-none flex-shrink-0 overflow-x-auto no-scrollbar">
+      {/* Left: File name, status badge, additions/deletions. Hidden on phone
+          widths: the mobile diff header already carries the file identity, and
+          dropping it keeps the actions reachable without a sideways scroll. */}
+      <div className="hidden md:flex items-center space-x-2 min-w-0 pr-2">
+        <FileIcon name={fileName} size={14} className="flex-shrink-0" />
+        <span className="font-mono text-ink font-medium truncate" title={filePath}>
+          {fileName}
+        </span>
+        
+        <span className={`px-1.5 py-0.5 text-[10px] font-mono font-semibold rounded border ${statusInfo.badgeBgClass} flex-shrink-0`}>
+          {statusInfo.charStatus} {statusInfo.label}
+        </span>
+
+        {(additions > 0 || deletions > 0) && (
+          <div className="flex items-center space-x-1.5 text-[11px] font-mono flex-shrink-0 ml-1">
+            {additions > 0 && <span className="text-success font-semibold">+{additions}</span>}
+            {deletions > 0 && <span className="text-error font-semibold">-{deletions}</span>}
+          </div>
+        )}
+      </div>
+
+      {/* Right: Controls & actions. `ml-auto` keeps them right-aligned on phone
+          widths, where the identity block above is hidden. */}
+      <div className="flex items-center space-x-1 text-ink/70 flex-shrink-0 ml-auto">
+        {/* View mode toggle (Unified vs Split) */}
+        <div className="flex items-center bg-canvas rounded border border-ink/15 p-0.5 mr-1">
+          <button
+            type="button"
+            onClick={onToggleViewMode}
+            className={`px-2 py-0.5 rounded text-[11px] font-medium flex items-center space-x-1 transition-colors ${
+              viewMode === 'split' ? 'bg-paper text-ink shadow-xs' : 'text-ink/60 hover:text-ink'
+            }`}
+            title="Split (side-by-side) Diff"
+          >
+            <Columns size={12} />
+            <span className="hidden sm:inline">Split</span>
+          </button>
+          <button
+            type="button"
+            onClick={onToggleViewMode}
+            className={`px-2 py-0.5 rounded text-[11px] font-medium flex items-center space-x-1 transition-colors ${
+              viewMode === 'unified' ? 'bg-paper text-ink shadow-xs' : 'text-ink/60 hover:text-ink'
+            }`}
+            title="Unified Diff"
+          >
+            <AlignJustify size={12} />
+            <span className="hidden sm:inline">Unified</span>
+          </button>
+        </div>
+
+        {/* Ignore whitespace toggle */}
+        <button
+          type="button"
+          onClick={onToggleWhitespace}
+          className={`p-1.5 rounded transition-colors ${
+            ignoreWhitespace ? 'bg-ink/10 text-ink' : 'text-ink/50 hover:text-ink hover:bg-ink/5'
+          }`}
+          title={ignoreWhitespace ? 'Whitespace ignored' : 'Ignore whitespace'}
+        >
+          <Space size={13} />
+        </button>
+
+        {/* Refresh */}
+        <button
+          type="button"
+          onClick={onRefresh}
+          className="p-1.5 text-ink/50 hover:text-ink hover:bg-ink/5 rounded transition-colors"
+          title="Refresh Diff"
+          disabled={isLoading}
+        >
+          <RefreshCw size={13} className={isLoading ? 'animate-spin' : ''} />
+        </button>
+
+        {/* Copy diff */}
+        <button
+          type="button"
+          onClick={onCopyDiff}
+          className="p-1.5 text-ink/50 hover:text-ink hover:bg-ink/5 rounded transition-colors"
+          title="Copy Diff Text"
+        >
+          {isCopied ? <Check size={13} className="text-success" /> : <Copy size={13} />}
+        </button>
+
+        {/* Discard changes */}
+        {!isStaged && (
+          <button
+            type="button"
+            onClick={onDiscard}
+            className="p-1.5 text-ink/50 hover:text-error hover:bg-error/10 rounded transition-colors"
+            title="Discard changes in this file"
+          >
+            <Undo2 size={13} />
+          </button>
+        )}
+
+        {/* Stage / Unstage button */}
+        <button
+          type="button"
+          onClick={onStageUnstage}
+          className="px-2 py-1 text-[11px] font-medium rounded border border-ink/15 hover:bg-ink/5 flex items-center space-x-1 transition-colors text-ink"
+          title={isStaged ? 'Unstage file' : 'Stage file'}
+        >
+          {isStaged ? (
+            <>
+              <Minus size={12} />
+              <span>Unstage</span>
+            </>
+          ) : (
+            <>
+              <Plus size={12} />
+              <span>Stage</span>
+            </>
+          )}
+        </button>
+
+        {/* Switch to normal code editor */}
+        {onOpenInEditor && (
+          <button
+            type="button"
+            onClick={onOpenInEditor}
+            className="px-2 py-1 text-[11px] font-medium rounded bg-ink text-canvas hover:bg-ink/90 flex items-center space-x-1 transition-colors shadow-xs ml-1"
+            title="Open in Code Editor"
+          >
+            <Code2 size={12} />
+            <span className="hidden sm:inline">Edit File</span>
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,117 @@
+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';
+
+interface UnifiedViewProps {
+  lines: DiffLine[];
+  language: string;
+}
+
+export function UnifiedView({ lines, language }: UnifiedViewProps) {
+  const syntaxReady = useSyntaxReady();
+
+  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 className="w-full h-full overflow-auto font-mono text-xs select-text bg-paper text-ink code-surface">
+      <table className="w-max min-w-full border-collapse">
+        <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 */}
+                <td
+                  className={`w-12 py-0.5 px-2 text-right text-[10px] select-none border-r border-ink/10 font-mono ${
+                    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 ${
+                    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 whitespace-pre text-ink pr-6">
+                  <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>
+  );
+}