@plannotator/ui 0.22.0

package/components/plan-diff/PlanDiffBadge.tsx

@@ -0,0 +1,48 @@
+/**
+ * PlanDiffBadge — The +/- change badge
+ *
+ * Sits in the repo info area of the document card (top-left).
+ * Shows addition/deletion counts and toggles plan diff view when clicked.
+ */
+
+import React from "react";
+import type { PlanDiffStats } from "../../utils/planDiffEngine";
+
+interface PlanDiffBadgeProps {
+  stats: PlanDiffStats | null;
+  isActive: boolean;
+  onToggle: () => void;
+  hasPreviousVersion: boolean;
+}
+
+export const PlanDiffBadge: React.FC<PlanDiffBadgeProps> = ({
+  stats,
+  isActive,
+  onToggle,
+  hasPreviousVersion,
+}) => {
+  if (!hasPreviousVersion || !stats) return null;
+
+  const hasChanges = stats.additions > 0 || stats.deletions > 0 || stats.modifications > 0;
+  if (!hasChanges) return null;
+
+  return (
+    <button
+      onClick={onToggle}
+      className={`px-1.5 py-0.5 rounded text-[9px] font-mono transition-colors cursor-pointer ${
+        isActive
+          ? "bg-primary/15"
+          : "bg-muted/50 hover:bg-muted"
+      }`}
+      title={isActive ? "Exit plan diff view" : "Show what changed from previous version"}
+    >
+      <span className={isActive ? "text-success" : "text-success/70"}>
+        +{stats.additions}
+      </span>
+      <span className="text-muted-foreground/50 mx-0.5">/</span>
+      <span className={isActive ? "text-destructive" : "text-destructive/70"}>
+        -{stats.deletions}
+      </span>
+    </button>
+  );
+};

package/components/plan-diff/PlanDiffModeSwitcher.tsx

@@ -0,0 +1,103 @@
+/**
+ * PlanDiffModeSwitcher — Toggle between clean/rendered and raw diff views
+ *
+ * Follows the same visual pattern as ModeSwitcher.
+ */
+
+import React from "react";
+
+export type PlanDiffMode = "clean" | "classic" | "raw";
+
+interface PlanDiffModeSwitcherProps {
+  mode: PlanDiffMode;
+  onChange: (mode: PlanDiffMode) => void;
+}
+
+export const PlanDiffModeSwitcher: React.FC<PlanDiffModeSwitcherProps> = ({
+  mode,
+  onChange,
+}) => {
+  return (
+    <div className="inline-flex items-center bg-muted/50 rounded-lg p-0.5 border border-border/30">
+      <button
+        onClick={() => onChange("clean")}
+        title="Word-level inline diff (experimental)"
+        className={`flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-xs font-medium transition-all ${
+          mode === "clean"
+            ? "bg-background text-foreground shadow-sm"
+            : "text-muted-foreground hover:text-foreground"
+        }`}
+      >
+        <svg
+          className="w-3.5 h-3.5"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          strokeWidth={2}
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"
+          />
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+          />
+        </svg>
+        Rendered
+        <span className="text-[9px] uppercase tracking-wider opacity-60 ml-0.5">
+          exp
+        </span>
+      </button>
+      <button
+        onClick={() => onChange("classic")}
+        title="Block-level stacked diff (old above new)"
+        className={`flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-xs font-medium transition-all ${
+          mode === "classic"
+            ? "bg-background text-foreground shadow-sm"
+            : "text-muted-foreground hover:text-foreground"
+        }`}
+      >
+        <svg
+          className="w-3.5 h-3.5"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          strokeWidth={2}
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M4 6h16M4 12h16M4 18h16"
+          />
+        </svg>
+        Classic
+      </button>
+      <button
+        onClick={() => onChange("raw")}
+        className={`flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-xs font-medium transition-all ${
+          mode === "raw"
+            ? "bg-background text-foreground shadow-sm"
+            : "text-muted-foreground hover:text-foreground"
+        }`}
+      >
+        <svg
+          className="w-3.5 h-3.5"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          strokeWidth={2}
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5"
+          />
+        </svg>
+        Raw
+      </button>
+    </div>
+  );
+};

package/components/plan-diff/PlanDiffViewer.tsx

@@ -0,0 +1,214 @@
+/**
+ * PlanDiffViewer — Orchestrator for plan diff views
+ *
+ * Replaces the Viewer component when plan diff mode is active.
+ * Renders the document card with the same styling, but shows
+ * diff content instead of the annotatable plan.
+ */
+
+import React, { useState } from "react";
+import type { PlanDiffBlock, PlanDiffStats } from "../../utils/planDiffEngine";
+import type { Annotation, EditorMode } from "../../types";
+import {
+  PlanDiffModeSwitcher,
+  type PlanDiffMode,
+} from "./PlanDiffModeSwitcher";
+import { PlanCleanDiffView } from "./PlanCleanDiffView";
+import { PlanRawDiffView } from "./PlanRawDiffView";
+import { PlanDiffBadge } from "./PlanDiffBadge";
+import { VSCodeIcon } from "./VSCodeIcon";
+
+interface PlanDiffViewerProps {
+  diffBlocks: PlanDiffBlock[];
+  diffStats: PlanDiffStats;
+  diffMode: PlanDiffMode;
+  onDiffModeChange: (mode: PlanDiffMode) => void;
+  onPlanDiffToggle: () => void;
+  repoInfo?: { display: string; branch?: string } | null;
+  baseVersionLabel?: string;
+  baseVersion?: number;
+  maxWidth?: number;
+  // Annotation props
+  annotations?: Annotation[];
+  onAddAnnotation?: (ann: Annotation) => void;
+  onSelectAnnotation?: (id: string | null) => void;
+  selectedAnnotationId?: string | null;
+  mode?: EditorMode;
+  onOpenVscodeDiff?: (baseVersion: number) => Promise<{ ok?: boolean; error?: string }>;
+}
+
+const defaultOpenVscodeDiff = async (
+  baseVersion: number
+): Promise<{ ok?: boolean; error?: string }> => {
+  try {
+    const res = await fetch("/api/plan/vscode-diff", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ baseVersion }),
+    });
+    const data = (await res.json()) as { ok?: boolean; error?: string };
+    if (!res.ok || data.error) {
+      return { error: data.error || "Failed to open VS Code diff" };
+    }
+    return { ok: true };
+  } catch {
+    return { error: "Failed to connect to server" };
+  }
+};
+
+export const PlanDiffViewer: React.FC<PlanDiffViewerProps> = ({
+  diffBlocks,
+  diffStats,
+  diffMode,
+  onDiffModeChange,
+  onPlanDiffToggle,
+  repoInfo,
+  baseVersionLabel,
+  baseVersion,
+  maxWidth,
+  annotations,
+  onAddAnnotation,
+  onSelectAnnotation,
+  selectedAnnotationId,
+  mode,
+  onOpenVscodeDiff,
+}) => {
+  const [vscodeDiffLoading, setVscodeDiffLoading] = useState(false);
+  const [vscodeDiffError, setVscodeDiffError] = useState<string | null>(null);
+
+  const canOpenVscodeDiff = baseVersion != null;
+
+  const handleOpenVscodeDiff = async () => {
+    if (!canOpenVscodeDiff || baseVersion == null) return;
+    setVscodeDiffLoading(true);
+    setVscodeDiffError(null);
+    try {
+      const result = await (onOpenVscodeDiff ?? defaultOpenVscodeDiff)(baseVersion);
+      if (result.error) {
+        setVscodeDiffError(result.error);
+      }
+    } catch {
+      // A host-supplied opener that throws (instead of returning { error }) must
+      // not wedge the button in a permanent loading state.
+      setVscodeDiffError("Failed to open VS Code diff");
+    } finally {
+      setVscodeDiffLoading(false);
+    }
+  };
+
+  return (
+    <div className="relative z-50 w-full" style={maxWidth ? { maxWidth } : { maxWidth: 832 }}>
+      <article className="w-full bg-card border border-border/50 rounded-xl shadow-xl p-5 md:p-8 lg:p-10 xl:p-12 relative">
+        {/* Top-left: repo info + diff badge — matches Viewer layout (flex-col) so badge doesn't jump position */}
+        <div className="absolute top-3 left-3 md:top-4 md:left-5 flex flex-col items-start gap-1 text-[9px] text-muted-foreground/50 font-mono">
+          {repoInfo && (
+            <div className="flex items-center gap-1.5">
+              <span
+                className="px-1.5 py-0.5 bg-muted/50 rounded truncate max-w-[140px]"
+                title={repoInfo.display}
+              >
+                {repoInfo.display}
+              </span>
+              {repoInfo.branch && (
+                <span
+                  className="px-1.5 py-0.5 bg-muted/30 rounded max-w-[120px] flex items-center gap-1 overflow-hidden"
+                  title={repoInfo.branch}
+                >
+                  <svg
+                    className="w-2.5 h-2.5 flex-shrink-0"
+                    viewBox="0 0 16 16"
+                    fill="currentColor"
+                  >
+                    <path d="M9.5 3.25a2.25 2.25 0 1 1 3 2.122V6A2.5 2.5 0 0 1 10 8.5H6a1 1 0 0 0-1 1v1.128a2.251 2.251 0 1 1-1.5 0V5.372a2.25 2.25 0 1 1 1.5 0v1.836A2.493 2.493 0 0 1 6 7h4a1 1 0 0 0 1-1v-.628A2.25 2.25 0 0 1 9.5 3.25Zm-6 0a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Zm8.25-.75a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5ZM4.25 12a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Z" />
+                  </svg>
+                  <span className="truncate">{repoInfo.branch}</span>
+                </span>
+              )}
+            </div>
+          )}
+          <PlanDiffBadge
+            stats={diffStats}
+            isActive={true}
+            onToggle={onPlanDiffToggle}
+            hasPreviousVersion={true}
+          />
+        </div>
+
+        {/* Top-right: back to plan view button */}
+        <div className="float-right -mr-4 -mt-4 md:-mr-5 md:-mt-5 lg:-mr-7 lg:-mt-7 xl:-mr-9 xl:-mt-9 p-2">
+          <button
+            onClick={onPlanDiffToggle}
+            className="flex items-center gap-1 px-2 py-1.5 rounded-md text-xs text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
+            title="Back to plan view"
+          >
+            <span className="hidden md:inline text-[10px] font-medium">Exit Diff</span>
+            <svg
+              className="w-3.5 h-3.5"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              strokeWidth={2}
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M6 18L18 6M6 6l12 12"
+              />
+            </svg>
+          </button>
+        </div>
+
+        {/* Diff mode switcher + version label + VS Code button */}
+        <div className="mt-6 mb-6 flex items-center gap-3">
+          <PlanDiffModeSwitcher mode={diffMode} onChange={onDiffModeChange} />
+          {baseVersionLabel && (
+            <span className="text-[10px] text-muted-foreground">
+              vs {baseVersionLabel}
+            </span>
+          )}
+          {canOpenVscodeDiff && (
+            <button
+              onClick={handleOpenVscodeDiff}
+              disabled={vscodeDiffLoading}
+              className="ml-auto flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-xs font-medium text-muted-foreground hover:text-foreground hover:bg-muted/50 border border-border/30 transition-colors disabled:opacity-50"
+              title="Open diff in VS Code"
+            >
+              <VSCodeIcon className="w-3.5 h-3.5 flex-shrink-0" />
+              <span className="hidden md:inline">
+                {vscodeDiffLoading ? "Opening..." : "VS Code"}
+              </span>
+            </button>
+          )}
+        </div>
+
+        {/* VS Code diff error message */}
+        {vscodeDiffError && (
+          <div className="mb-4 px-3 py-2 rounded-md bg-destructive/10 border border-destructive/20 text-xs text-destructive">
+            {vscodeDiffError}
+            <button
+              onClick={() => setVscodeDiffError(null)}
+              className="ml-2 text-destructive/60 hover:text-destructive"
+            >
+              dismiss
+            </button>
+          </div>
+        )}
+
+        {/* Diff content */}
+        {diffMode === "raw" ? (
+          <PlanRawDiffView blocks={diffBlocks} />
+        ) : (
+          <PlanCleanDiffView
+            blocks={diffBlocks}
+            annotations={annotations}
+            onAddAnnotation={onAddAnnotation}
+            onSelectAnnotation={onSelectAnnotation}
+            selectedAnnotationId={selectedAnnotationId}
+            mode={mode}
+            wordLevel={diffMode === "clean"}
+          />
+        )}
+      </article>
+    </div>
+  );
+};

package/components/plan-diff/PlanRawDiffView.tsx

@@ -0,0 +1,102 @@
+/**
+ * PlanRawDiffView — Raw markdown diff mode (P2 style)
+ *
+ * Shows the raw markdown source with +/- prefixed lines,
+ * like a traditional code diff. Monospace font, line numbers,
+ * colored backgrounds.
+ */
+
+import React, { useMemo } from "react";
+import type { PlanDiffBlock } from "../../utils/planDiffEngine";
+
+interface PlanRawDiffViewProps {
+  blocks: PlanDiffBlock[];
+}
+
+interface DiffLine {
+  type: "added" | "removed" | "unchanged";
+  content: string;
+  lineNumber: number | null;
+}
+
+export const PlanRawDiffView: React.FC<PlanRawDiffViewProps> = ({ blocks }) => {
+  const lines = useMemo(() => {
+    const result: DiffLine[] = [];
+    let lineNum = 1;
+
+    for (const block of blocks) {
+      const rawLines = block.content.split("\n");
+      // Remove trailing empty string from split
+      if (rawLines.length > 0 && rawLines[rawLines.length - 1] === "") {
+        rawLines.pop();
+      }
+
+      if (block.type === "modified" && block.oldContent) {
+        // Show old content as removed
+        const oldLines = block.oldContent.split("\n");
+        if (oldLines.length > 0 && oldLines[oldLines.length - 1] === "") {
+          oldLines.pop();
+        }
+        for (const line of oldLines) {
+          result.push({ type: "removed", content: line, lineNumber: null });
+        }
+        // Show new content as added
+        for (const line of rawLines) {
+          result.push({ type: "added", content: line, lineNumber: lineNum++ });
+        }
+      } else if (block.type === "added") {
+        for (const line of rawLines) {
+          result.push({ type: "added", content: line, lineNumber: lineNum++ });
+        }
+      } else if (block.type === "removed") {
+        for (const line of rawLines) {
+          result.push({ type: "removed", content: line, lineNumber: null });
+        }
+      } else {
+        for (const line of rawLines) {
+          result.push({
+            type: "unchanged",
+            content: line,
+            lineNumber: lineNum++,
+          });
+        }
+      }
+    }
+
+    return result;
+  }, [blocks]);
+
+  return (
+    <div className="font-mono text-[13px] leading-relaxed bg-muted/30 rounded-lg border border-border/30 overflow-x-auto">
+      <div>
+        {lines.map((line, index) => (
+          <div
+            key={index}
+            className={`flex px-4 py-0.5 ${
+              line.type === "added"
+                ? "plan-diff-line-added"
+                : line.type === "removed"
+                  ? "plan-diff-line-removed"
+                  : "hover:bg-muted/30"
+            }`}
+          >
+            {/* Gutter: +/- prefix */}
+            <div className="w-5 flex-shrink-0 select-none opacity-60 text-right pr-2">
+              {line.type === "added"
+                ? "+"
+                : line.type === "removed"
+                  ? "-"
+                  : " "}
+            </div>
+            {/* Line number */}
+            <div className="w-8 flex-shrink-0 select-none text-muted-foreground/40 text-right pr-3 text-[11px]">
+              {line.lineNumber ?? ""}
+            </div>
+            {/* Content */}
+            <div className="whitespace-pre-wrap break-words min-w-0">{line.content || " "}</div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};

package/components/plan-diff/VSCodeIcon.tsx

@@ -0,0 +1,132 @@
+import React from "react";
+
+export const VSCodeIcon: React.FC<{ className?: string }> = ({ className }) => (
+  <svg
+    className={className}
+    viewBox="0 0 100 100"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <mask
+      id="mask0"
+      {...{ 'mask-type': 'alpha' }}
+      maskUnits="userSpaceOnUse"
+      x="0"
+      y="0"
+      width="100"
+      height="100"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M70.9119 99.3171C72.4869 99.9307 74.2828 99.8914 75.8725 99.1264L96.4608 89.2197C98.6242 88.1787 100 85.9892 100 83.5872V16.4133C100 14.0113 98.6243 11.8218 96.4609 10.7808L75.8725 0.873756C73.7862 -0.130129 71.3446 0.11576 69.5135 1.44695C69.252 1.63711 69.0028 1.84943 68.769 2.08341L29.3551 38.0415L12.1872 25.0096C10.589 23.7965 8.35363 23.8959 6.86933 25.2461L1.36303 30.2549C-0.452552 31.9064 -0.454633 34.7627 1.35853 36.417L16.2471 50.0001L1.35853 63.5832C-0.454633 65.2374 -0.452552 68.0938 1.36303 69.7453L6.86933 74.7541C8.35363 76.1043 10.589 76.2037 12.1872 74.9905L29.3551 61.9587L68.769 97.9167C69.3925 98.5406 70.1246 99.0104 70.9119 99.3171ZM75.0152 27.2989L45.1091 50.0001L75.0152 72.7012V27.2989Z"
+        fill="white"
+      />
+    </mask>
+    <g mask="url(#mask0)">
+      <path
+        d="M96.4614 10.7962L75.8569 0.875542C73.4719 -0.272773 70.6217 0.211611 68.75 2.08333L1.29858 63.5832C-0.515693 65.2373 -0.513607 68.0937 1.30308 69.7452L6.81272 74.754C8.29793 76.1042 10.5347 76.2036 12.1338 74.9905L93.3609 13.3699C96.086 11.3026 100 13.2462 100 16.6667V16.4275C100 14.0265 98.6246 11.8378 96.4614 10.7962Z"
+        fill="#0065A9"
+      />
+      <g filter="url(#filter0_d)">
+        <path
+          d="M96.4614 89.2038L75.8569 99.1245C73.4719 100.273 70.6217 99.7884 68.75 97.9167L1.29858 36.4169C-0.515693 34.7627 -0.513607 31.9063 1.30308 30.2548L6.81272 25.246C8.29793 23.8958 10.5347 23.7964 12.1338 25.0095L93.3609 86.6301C96.086 88.6974 100 86.7538 100 83.3334V83.5726C100 85.9735 98.6246 88.1622 96.4614 89.2038Z"
+          fill="#007ACC"
+        />
+      </g>
+      <g filter="url(#filter1_d)">
+        <path
+          d="M75.8578 99.1263C73.4721 100.274 70.6219 99.7885 68.75 97.9166C71.0564 100.223 75 98.5895 75 95.3278V4.67213C75 1.41039 71.0564 -0.223106 68.75 2.08329C70.6219 0.211402 73.4721 -0.273666 75.8578 0.873633L96.4587 10.7807C98.6234 11.8217 100 14.0112 100 16.4132V83.5871C100 85.9891 98.6234 88.1786 96.4586 89.2196L75.8578 99.1263Z"
+          fill="#1F9CF0"
+        />
+      </g>
+      <g style={{ mixBlendMode: "overlay" }} opacity="0.25">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M70.8511 99.3171C72.4261 99.9306 74.2221 99.8913 75.8117 99.1264L96.4 89.2197C98.5634 88.1787 99.9392 85.9892 99.9392 83.5871V16.4133C99.9392 14.0112 98.5635 11.8217 96.4001 10.7807L75.8117 0.873695C73.7255 -0.13019 71.2838 0.115699 69.4527 1.44688C69.1912 1.63705 68.942 1.84937 68.7082 2.08335L29.2943 38.0414L12.1264 25.0096C10.5283 23.7964 8.29285 23.8959 6.80855 25.246L1.30225 30.2548C-0.513334 31.9064 -0.515415 34.7627 1.29775 36.4169L16.1863 50L1.29775 63.5832C-0.515415 65.2374 -0.513334 68.0937 1.30225 69.7452L6.80855 74.754C8.29285 76.1042 10.5283 76.2036 12.1264 74.9905L29.2943 61.9586L68.7082 97.9167C69.3317 98.5405 70.0638 99.0104 70.8511 99.3171ZM74.9544 27.2989L45.0483 50L74.9544 72.7012V27.2989Z"
+          fill="url(#paint0_linear)"
+        />
+      </g>
+    </g>
+    <defs>
+      <filter
+        id="filter0_d"
+        x="-8.39411"
+        y="15.8291"
+        width="116.727"
+        height="92.2456"
+        filterUnits="userSpaceOnUse"
+        colorInterpolationFilters="sRGB"
+      >
+        <feFlood floodOpacity="0" result="BackgroundImageFix" />
+        <feColorMatrix
+          in="SourceAlpha"
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+        />
+        <feOffset />
+        <feGaussianBlur stdDeviation="4.16667" />
+        <feColorMatrix
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"
+        />
+        <feBlend
+          mode="overlay"
+          in2="BackgroundImageFix"
+          result="effect1_dropShadow"
+        />
+        <feBlend
+          mode="normal"
+          in="SourceGraphic"
+          in2="effect1_dropShadow"
+          result="shape"
+        />
+      </filter>
+      <filter
+        id="filter1_d"
+        x="60.4167"
+        y="-8.07558"
+        width="47.9167"
+        height="116.151"
+        filterUnits="userSpaceOnUse"
+        colorInterpolationFilters="sRGB"
+      >
+        <feFlood floodOpacity="0" result="BackgroundImageFix" />
+        <feColorMatrix
+          in="SourceAlpha"
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+        />
+        <feOffset />
+        <feGaussianBlur stdDeviation="4.16667" />
+        <feColorMatrix
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"
+        />
+        <feBlend
+          mode="overlay"
+          in2="BackgroundImageFix"
+          result="effect1_dropShadow"
+        />
+        <feBlend
+          mode="normal"
+          in="SourceGraphic"
+          in2="effect1_dropShadow"
+          result="shape"
+        />
+      </filter>
+      <linearGradient
+        id="paint0_linear"
+        x1="49.9392"
+        y1="0.257812"
+        x2="49.9392"
+        y2="99.7423"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="white" />
+        <stop offset="1" stopColor="white" stopOpacity="0" />
+      </linearGradient>
+    </defs>
+  </svg>
+);