refactor: modularize TextDiffChecker with improved UX

frontend/src/pages/TextDiffChecker/components/DiffModeToggle.jsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { TextAlignLeft, TextAlignCenter, LetterAa } from '@carbon/icons-react';
+
+const modes = [
+  { label: 'Lines', icon: TextAlignLeft },
+  { label: 'Words', icon: TextAlignCenter },
+  { label: 'Chars', icon: LetterAa },
+];
+
+export default function DiffModeToggle({ activeMode, onChange }) {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        backgroundColor: 'var(--cds-layer-02)',
+        borderRadius: '20px',
+        padding: '4px',
+        width: 'fit-content',
+        minHeight: '40px',
+        boxShadow: 'inset 0 1px 3px rgba(0, 0, 0, 0.1)',
+      }}
+    >
+      {modes.map((mode, idx) => {
+        const isActive = activeMode === idx;
+        const Icon = mode.icon;
+        return (
+          <button
+            key={idx}
+            onClick={() => onChange(idx)}
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: '8px',
+              padding: '8px 16px',
+              background: isActive ? 'var(--cds-layer)' : 'transparent',
+              border: 'none',
+              borderRadius: '16px',
+              color: isActive ? 'var(--cds-text-primary)' : 'var(--cds-text-secondary)',
+              fontSize: '0.875rem',
+              fontWeight: 600,
+              cursor: 'pointer',
+              transition: 'all 0.2s',
+              boxShadow: isActive ? '0 2px 4px rgba(0, 0, 0, 0.15)' : 'none',
+              minWidth: '100px',
+              justifyContent: 'center',
+            }}
+            onMouseEnter={(e) => {
+              if (!isActive) {
+                e.currentTarget.style.backgroundColor = 'var(--cds-layer-hover)';
+              }
+            }}
+            onMouseLeave={(e) => {
+              if (!isActive) {
+                e.currentTarget.style.backgroundColor = 'transparent';
+              }
+            }}
+          >
+            <Icon size={16} />
+            {mode.label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}

frontend/src/pages/TextDiffChecker/components/DiffView.jsx

@@ -0,0 +1,95 @@
+import React from 'react';
+
+export default function DiffView({ diffs }) {
+  const renderDiff = () => {
+    if (diffs.length === 0) {
+      return <span style={{ color: 'var(--cds-text-secondary)' }}>No differences</span>;
+    }
+
+    return diffs.map((part, index) => {
+      const isAdded = part.added;
+      const isRemoved = part.removed;
+
+      let style = {
+        display: 'block',
+        padding: '1px 4px',
+        margin: '1px 0',
+      };
+
+      if (isAdded) {
+        style = {
+          ...style,
+          backgroundColor: 'var(--cds-support-success-inverse)',
+          color: 'var(--cds-text-on-color)',
+        };
+      } else if (isRemoved) {
+        style = {
+          ...style,
+          backgroundColor: 'var(--cds-support-error-inverse)',
+          color: 'var(--cds-text-on-color)',
+        };
+      }
+
+      const prefix = isAdded ? '+ ' : isRemoved ? '- ' : '  ';
+
+      return (
+        <span key={index} style={style}>
+          <span style={{ userSelect: 'none', opacity: 0.7 }}>{prefix}</span>
+          {part.value}
+        </span>
+      );
+    });
+  };
+
+  return (
+    <div
+      className="pane"
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        height: '100%',
+        minHeight: 0,
+        flex: 1,
+      }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          minHeight: '30px',
+          marginBottom: '0.5rem',
+        }}
+      >
+        <label
+          style={{
+            fontSize: '0.75rem',
+            fontWeight: 400,
+            lineHeight: 1.5,
+            letterSpacing: '0.32px',
+            color: 'var(--cds-text-secondary)',
+            textTransform: 'uppercase',
+          }}
+        >
+          Differences
+        </label>
+      </div>
+      <div
+        style={{
+          flex: 1,
+          overflowY: 'auto',
+          padding: '0.75rem',
+          backgroundColor: 'var(--cds-layer)',
+          border: '1px solid var(--cds-border-strong)',
+          color: 'var(--cds-text-primary)',
+          whiteSpace: 'pre-wrap',
+          fontFamily: "'IBM Plex Mono', monospace",
+          fontSize: '0.875rem',
+          lineHeight: '1.5',
+        }}
+      >
+        {renderDiff()}
+      </div>
+    </div>
+  );
+}

frontend/src/pages/TextDiffChecker/constants.js

@@ -0,0 +1,8 @@
+export const algorithmOptions = [
+  { id: 'lines', label: 'Lines', description: 'Compare line by line' },
+  { id: 'words', label: 'Words', description: 'Compare word by word' },
+  { id: 'wordsWithSpace', label: 'Words with Space', description: 'Words including whitespace' },
+  { id: 'chars', label: 'Characters', description: 'Compare character by character' },
+  { id: 'sentences', label: 'Sentences', description: 'Compare sentence by sentence' },
+  { id: 'json', label: 'JSON', description: 'Semantic JSON comparison' },
+];