fix(ui): align context surface icons

packages/ui/src/components/icons/DiffIcon.tsx

@@ -1,9 +1,21 @@
 import type { SVGProps } from 'react';
 
+import { Icon } from '@/components/icon/Icon';
+
 interface DiffIconProps extends Omit<SVGProps<SVGSVGElement>, 'children'> {
   size?: number | string;
 }
 
+export function DiffViewIcon({ className = 'h-5 w-5' }: { className?: string }) {
+  return (
+    <span aria-hidden="true" className={`relative inline-block overflow-hidden rounded-[2px] ${className}`}>
+      <span className="absolute left-[20%] top-[20%] h-[60%] w-[25%] bg-[var(--status-error)]/25" />
+      <span className="absolute right-[20%] top-[20%] h-[60%] w-[25%] bg-[var(--status-success)]/25" />
+      <Icon name="layout-column" className="absolute inset-0 h-full w-full" />
+    </span>
+  );
+}
+
 /**
  * Git merge/branch icon for the Diff tab.
  */