{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "agent-suggest-card-stack",
  "type": "registry:ui",
  "description": "Stack of suggestion cards for AI agent responses",
  "files": [
    {
      "path": "registry/default/ui/agent-suggest-card-stack.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface SuggestionItem {\n  id: string\n  title: string\n  progress: number\n  status?: \"success\" | \"error\" | \"mixed\"\n  mixedProgress?: { success: number; error: number }\n}\n\nexport interface AgentSuggestCardStackProps\n  extends Omit<React.ComponentProps<\"svg\">, \"width\" | \"height\"> {\n  width?: number\n  height?: number\n  backgroundColor?: string\n  cardFill?: string\n  cardStroke?: string\n  borderColor?: string\n  textColor?: string\n  mutedTextColor?: string\n  badgeColor?: string\n  badgeTextColor?: string\n  botBadgeColor?: string\n  botBadgeTextColor?: string\n  botBadgeStrokeColor?: string\n  eyeIconColor?: string\n  progressBarBackground?: string\n  progressBarStrokeColor?: string\n  mixedProgressSeparatorColor?: string\n  successColor?: string\n  errorColor?: string\n  commitButtonFill?: string\n  commitButtonStroke?: string\n  commitButtonTextColor?: string\n  headerTitle?: string\n  headerBadge?: string\n  suggestions?: SuggestionItem[]\n  commitButtonText?: string\n  logoIcon?: React.ReactNode\n}\n\nfunction VercelLogo({\n  color = \"#171717\",\n  size = 16,\n}: {\n  color?: string\n  size?: number\n}) {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      data-slot=\"agent-suggest-vercel-logo\"\n      fill=\"none\"\n      focusable=\"false\"\n      height={size}\n      viewBox=\"0 0 16 16\"\n      width={size}\n    >\n      <path\n        d=\"M12.667 3C14.5077 3.0002 15.9998 4.4923 16 6.333V11.667C15.9998 13.5077 14.5077 14.9998 12.667 15H3.333C1.4923 14.9998 0.0002 13.5077 0 11.667V6.333C0.0002 4.4923 1.4923 3.0002 3.333 3H12.667ZM4 11.833H12L8 4.833L4 11.833Z\"\n        fill={color}\n      />\n    </svg>\n  )\n}\n\nfunction EyeIcon({\n  color = \"#7D7D7D\",\n  size = 14,\n}: {\n  color?: string\n  size?: number\n}) {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      data-slot=\"agent-suggest-eye-icon\"\n      fill=\"none\"\n      focusable=\"false\"\n      height={size}\n      viewBox=\"0 0 14 14\"\n      width={size}\n    >\n      <path\n        d=\"M1.8027 4.3692C3.4858 2.4147 6.5142 2.4147 8.1973 4.3692L10.1992 6.6944V7.3058L8.1973 9.631C6.5142 11.5854 3.4858 11.5854 1.8027 9.631L-0.1992 7.3058V6.6944L1.8027 4.3692ZM7.4863 4.9806C6.1773 3.4607 3.8227 3.4607 2.5137 4.9806L0.7744 7.0001L2.5137 9.0196C3.8227 10.5394 6.1773 10.5394 7.4863 9.0196L9.2246 7.0001L7.4863 4.9806ZM5 5.1251C6.0355 5.1251 6.875 5.9646 6.875 7.0001C6.875 8.0356 6.0355 8.8751 5 8.8751C3.9645 8.8751 3.125 8.0356 3.125 7.0001C3.125 5.9646 3.9645 5.1251 5 5.1251ZM5 6.0626C4.4822 6.0626 4.0625 6.4823 4.0625 7.0001C4.0625 7.5178 4.4823 7.9376 5 7.9376C5.5177 7.9376 5.9375 7.5178 5.9375 7.0001C5.9375 6.4823 5.5178 6.0626 5 6.0626Z\"\n        fill={color}\n      />\n    </svg>\n  )\n}\n\nfunction AgentSuggestDefs({\n  backShadowId,\n  frontShadowId,\n  firstProgressClipId,\n  secondProgressClipId,\n}: {\n  backShadowId: string\n  frontShadowId: string\n  firstProgressClipId: string\n  secondProgressClipId: string\n}) {\n  return (\n    <defs data-slot=\"agent-suggest-defs\">\n      <filter\n        filterUnits=\"userSpaceOnUse\"\n        height=\"110%\"\n        id={backShadowId}\n        width=\"104%\"\n        x=\"-2\"\n        y=\"0\"\n      >\n        <feFlood floodOpacity=\"0\" result=\"BackgroundImageFix\" />\n        <feColorMatrix\n          in=\"SourceAlpha\"\n          result=\"hardAlpha\"\n          type=\"matrix\"\n          values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\n        />\n        <feOffset dy=\"1\" />\n        <feGaussianBlur stdDeviation=\"1\" />\n        <feColorMatrix\n          type=\"matrix\"\n          values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0\"\n        />\n        <feBlend in2=\"BackgroundImageFix\" mode=\"normal\" result=\"shadow\" />\n        <feBlend in=\"SourceGraphic\" in2=\"shadow\" mode=\"normal\" result=\"shape\" />\n      </filter>\n      <filter\n        filterUnits=\"userSpaceOnUse\"\n        height=\"118%\"\n        id={frontShadowId}\n        width=\"108%\"\n        x=\"-4\"\n        y=\"-1\"\n      >\n        <feFlood floodOpacity=\"0\" result=\"BackgroundImageFix\" />\n        <feColorMatrix\n          in=\"SourceAlpha\"\n          result=\"hardAlpha\"\n          type=\"matrix\"\n          values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\n        />\n        <feOffset dy=\"4\" />\n        <feGaussianBlur stdDeviation=\"4\" />\n        <feColorMatrix\n          type=\"matrix\"\n          values=\"0 0 0 0 0.05 0 0 0 0 0.05 0 0 0 0 0.05 0 0 0 0.16 0\"\n        />\n        <feBlend in2=\"BackgroundImageFix\" mode=\"normal\" result=\"shadow\" />\n        <feBlend in=\"SourceGraphic\" in2=\"shadow\" mode=\"normal\" result=\"shape\" />\n      </filter>\n      <clipPath id={firstProgressClipId}>\n        <rect height=\"11\" rx=\"5.5\" width=\"376\" x=\"34\" y=\"71\" />\n      </clipPath>\n      <clipPath id={secondProgressClipId}>\n        <rect height=\"21\" rx=\"5\" width=\"352\" x=\"58\" y=\"114\" />\n      </clipPath>\n    </defs>\n  )\n}\n\nfunction AgentSuggestCardFrame({\n  x,\n  y,\n  width,\n  height,\n  fill,\n  stroke,\n  radius = 12,\n}: {\n  x: number\n  y: number\n  width: number\n  height: number\n  fill: string\n  stroke: string\n  radius?: number\n}) {\n  return (\n    <g data-slot=\"agent-suggest-card-frame\">\n      <rect fill={fill} height={height} rx={radius} width={width} x={x} y={y} />\n      <rect\n        fill=\"none\"\n        height={height + 1}\n        rx={radius}\n        stroke={stroke}\n        width={width + 1}\n        x={x - 0.5}\n        y={y - 0.5}\n      />\n    </g>\n  )\n}\n\nfunction AgentSuggestBotBadge({\n  x,\n  y,\n  strokeColor,\n  textColor,\n}: {\n  x: number\n  y: number\n  strokeColor: string\n  textColor: string\n}) {\n  return (\n    <g data-slot=\"agent-suggest-bot-badge\">\n      <rect\n        fill=\"none\"\n        height=\"18\"\n        rx=\"9\"\n        stroke={strokeColor}\n        width=\"32\"\n        x={x}\n        y={y}\n      />\n      <text\n        fill={textColor}\n        fontFamily=\"system-ui, sans-serif\"\n        fontSize=\"9\"\n        textAnchor=\"middle\"\n        x={x + 16}\n        y={y + 12.5}\n      >\n        bot\n      </text>\n    </g>\n  )\n}\n\nfunction AgentSuggestCommitButton({\n  text,\n  fill,\n  stroke,\n  textColor,\n}: {\n  text: string\n  fill: string\n  stroke: string\n  textColor: string\n}) {\n  return (\n    <g data-slot=\"agent-suggest-commit-button\">\n      <rect fill={fill} height=\"22\" rx=\"5\" width=\"111\" x=\"299\" y=\"141\" />\n      <rect\n        fill=\"none\"\n        height=\"23\"\n        rx=\"5\"\n        stroke={stroke}\n        width=\"112\"\n        x=\"298.5\"\n        y=\"140.5\"\n      />\n      <text\n        fill={textColor}\n        fontFamily=\"system-ui, sans-serif\"\n        fontSize=\"11\"\n        fontWeight=\"500\"\n        textAnchor=\"middle\"\n        x=\"354.5\"\n        y=\"156\"\n      >\n        {text}\n      </text>\n    </g>\n  )\n}\n\nfunction AgentSuggestCardStack({\n  width = 444,\n  height = 178,\n  backgroundColor = \"transparent\",\n  cardFill = \"var(--card)\",\n  cardStroke = \"var(--border)\",\n  borderColor,\n  textColor = \"var(--foreground)\",\n  mutedTextColor = \"var(--muted-foreground)\",\n  badgeColor = \"#388E4A\",\n  badgeTextColor = \"var(--primary-foreground)\",\n  botBadgeColor = \"var(--muted)\",\n  botBadgeTextColor = \"var(--muted-foreground)\",\n  botBadgeStrokeColor = \"var(--border)\",\n  eyeIconColor = \"var(--muted-foreground)\",\n  progressBarBackground = \"color-mix(in oklab, var(--muted) 85%, #388e4a 15%)\",\n  progressBarStrokeColor = \"var(--border)\",\n  mixedProgressSeparatorColor = \"color-mix(in oklab, var(--foreground) 12%, transparent)\",\n  successColor = \"color-mix(in oklab, #388e4a 50%, var(--muted))\",\n  errorColor = \"color-mix(in oklab, #c63d3d 50%, var(--muted))\",\n  commitButtonFill = \"var(--muted)\",\n  commitButtonStroke = \"var(--border)\",\n  commitButtonTextColor = \"var(--foreground)\",\n  headerTitle = \"Adding a #5347\",\n  headerBadge = \"Open\",\n  suggestions = [\n    { id: \"1\", title: \"Vercel\", progress: 8, status: \"success\" },\n    {\n      id: \"2\",\n      title: \"Vercel\",\n      progress: 8,\n      status: \"mixed\",\n      mixedProgress: { success: 92, error: 8 },\n    },\n  ],\n  commitButtonText = \"Commit to main\",\n  logoIcon,\n  className,\n  ...props\n}: AgentSuggestCardStackProps) {\n  const estimateTextWidth = (value: string) => {\n    // Good enough for compact UI labels in this fixed-size SVG.\n    return Math.max(26, Math.round(value.length * 6.2))\n  }\n\n  const resolvedCardStroke = borderColor ?? cardStroke\n  const baseId = React.useId().replaceAll(\":\", \"\")\n  const backShadowId = `${baseId}-shadow-back`\n  const frontShadowId = `${baseId}-shadow-front`\n  const firstProgressClipId = `${baseId}-progress-1`\n  const secondProgressClipId = `${baseId}-progress-2`\n\n  const first = suggestions[0] ?? {\n    id: \"1\",\n    title: \"Vercel\",\n    progress: 8,\n    status: \"success\" as const,\n  }\n  const second = suggestions[1] ?? {\n    id: \"2\",\n    title: \"Vercel\",\n    progress: 8,\n    status: \"mixed\" as const,\n    mixedProgress: { success: 92, error: 8 },\n  }\n  const firstWidth = Math.max(29, first.progress * 3.76)\n  const secondWidth = Math.max(27, second.progress * 3.52)\n  const secondMixedWidth = Math.max(\n    27,\n    ((second.mixedProgress?.success ?? 8) / 100) * 352\n  )\n  const primaryTitle = first.title || \"Vercel\"\n  const secondaryTitle = second.title || \"Vercel\"\n  const primaryBotBadgeX = Math.min(\n    332,\n    42 + estimateTextWidth(primaryTitle) + 10\n  )\n  const secondaryBotBadgeX = Math.min(\n    312,\n    22 + estimateTextWidth(secondaryTitle) + 10\n  )\n  const secondaryTailTextX = Math.min(344, secondaryBotBadgeX + 41)\n\n  return (\n    <svg\n      className={cn(\"agent-suggest-theme\", className)}\n      data-slot=\"agent-suggest\"\n      fill=\"none\"\n      height={height}\n      viewBox=\"0 0 444 178\"\n      width={width}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      {...props}\n    >\n      <title>Agent suggestion card stack</title>\n      <AgentSuggestDefs\n        backShadowId={backShadowId}\n        firstProgressClipId={firstProgressClipId}\n        frontShadowId={frontShadowId}\n        secondProgressClipId={secondProgressClipId}\n      />\n      <rect fill={backgroundColor} height=\"178\" width=\"444\" />\n\n      <g\n        data-slot=\"agent-suggest-header-card\"\n        filter={`url(#${backShadowId})`}\n        opacity=\"0.72\"\n      >\n        <AgentSuggestCardFrame\n          fill={cardFill}\n          height={106}\n          stroke={resolvedCardStroke}\n          width={360}\n          x={42}\n          y={1}\n        />\n        <rect\n          fill={badgeColor}\n          height=\"19\"\n          rx=\"9.5\"\n          width=\"33\"\n          x=\"54\"\n          y=\"13.5\"\n        />\n        <text\n          fill={badgeTextColor}\n          fontFamily=\"system-ui, sans-serif\"\n          fontSize=\"10\"\n          fontWeight=\"500\"\n          textAnchor=\"middle\"\n          x=\"70.5\"\n          y=\"27\"\n        >\n          {headerBadge}\n        </text>\n        <text\n          fill={textColor}\n          fontFamily=\"system-ui, sans-serif\"\n          fontSize=\"14\"\n          fontWeight=\"600\"\n          x=\"93\"\n          y=\"27\"\n        >\n          {headerTitle}\n        </text>\n        <text\n          fill={mutedTextColor}\n          fontFamily=\"system-ui, sans-serif\"\n          fontSize=\"13\"\n          x=\"300\"\n          y=\"27\"\n        >\n          #5347\n        </text>\n      </g>\n\n      <g data-slot=\"agent-suggest-main-card\" filter={`url(#${frontShadowId})`}>\n        <AgentSuggestCardFrame\n          fill={cardFill}\n          height={141}\n          stroke={resolvedCardStroke}\n          width={400}\n          x={22}\n          y={35}\n        />\n\n        <g data-slot=\"agent-suggest-row-primary\" transform=\"translate(34, 47)\">\n          <g>{logoIcon ?? <VercelLogo color={textColor} size={16} />}</g>\n          <circle cx=\"29\" cy=\"8\" fill={botBadgeColor} r=\"7\" />\n          <g transform=\"translate(22, 1)\">\n            <EyeIcon color={eyeIconColor} size={14} />\n          </g>\n          <text\n            fill={textColor}\n            fontFamily=\"system-ui, sans-serif\"\n            fontSize=\"11\"\n            fontWeight=\"500\"\n            x=\"42\"\n            y=\"12\"\n          >\n            {primaryTitle}\n          </text>\n          <AgentSuggestBotBadge\n            strokeColor={botBadgeStrokeColor}\n            textColor={botBadgeTextColor}\n            x={primaryBotBadgeX}\n            y={0}\n          />\n        </g>\n\n        <g data-slot=\"agent-suggest-progress-primary\">\n          <rect\n            fill={progressBarBackground}\n            height=\"11\"\n            rx=\"5.5\"\n            stroke={progressBarStrokeColor}\n            width=\"376\"\n            x=\"34\"\n            y=\"71\"\n          />\n          <g clipPath={`url(#${firstProgressClipId})`}>\n            <rect\n              fill={successColor}\n              height=\"21\"\n              width={firstWidth}\n              x=\"34\"\n              y=\"71\"\n            />\n          </g>\n        </g>\n\n        <g\n          data-slot=\"agent-suggest-row-secondary\"\n          transform=\"translate(34, 90)\"\n        >\n          <g>{logoIcon ?? <VercelLogo color={textColor} size={16} />}</g>\n          <text\n            fill={textColor}\n            fontFamily=\"system-ui, sans-serif\"\n            fontSize=\"11\"\n            fontWeight=\"500\"\n            x=\"22\"\n            y=\"12\"\n          >\n            {secondaryTitle}\n          </text>\n          <AgentSuggestBotBadge\n            strokeColor={botBadgeStrokeColor}\n            textColor={botBadgeTextColor}\n            x={secondaryBotBadgeX}\n            y={0}\n          />\n          <text\n            fill={textColor}\n            fontFamily=\"system-ui, sans-serif\"\n            fontSize=\"11\"\n            x={secondaryTailTextX}\n            y=\"12\"\n          >\n            now\n          </text>\n        </g>\n\n        <g data-slot=\"agent-suggest-progress-secondary\">\n          <rect\n            fill={progressBarBackground}\n            height=\"21\"\n            rx=\"5\"\n            stroke={progressBarStrokeColor}\n            width=\"352\"\n            x=\"58\"\n            y=\"114\"\n          />\n          <g clipPath={`url(#${secondProgressClipId})`}>\n            {second.status === \"mixed\" ? (\n              <>\n                <rect\n                  fill={errorColor}\n                  height=\"11\"\n                  width=\"352\"\n                  x=\"58\"\n                  y=\"114\"\n                />\n                <rect\n                  fill={successColor}\n                  height=\"11\"\n                  width={secondMixedWidth}\n                  x=\"58\"\n                  y=\"114\"\n                />\n                <line\n                  stroke={mixedProgressSeparatorColor}\n                  x1=\"58\"\n                  x2=\"410\"\n                  y1=\"124.5\"\n                  y2=\"124.5\"\n                />\n                <rect\n                  fill={successColor}\n                  height=\"10\"\n                  width={secondMixedWidth}\n                  x=\"58\"\n                  y=\"125\"\n                />\n              </>\n            ) : (\n              <rect\n                fill={second.status === \"error\" ? errorColor : successColor}\n                height=\"21\"\n                width={secondWidth}\n                x=\"58\"\n                y=\"114\"\n              />\n            )}\n          </g>\n        </g>\n\n        <AgentSuggestCommitButton\n          fill={commitButtonFill}\n          stroke={commitButtonStroke}\n          text={commitButtonText}\n          textColor={commitButtonTextColor}\n        />\n      </g>\n    </svg>\n  )\n}\n\nexport {\n  AgentSuggestCardStack,\n  AgentSuggestDefs,\n  AgentSuggestCardFrame,\n  AgentSuggestBotBadge,\n  AgentSuggestCommitButton,\n  VercelLogo,\n  EyeIcon,\n}\n",
      "type": "registry:ui"
    }
  ]
}