winter-super-cli 2026.5.26 → 2026.5.27

package/resources/local/agents.md/components/CodeExample.tsx

@@ -1,207 +0,0 @@
-import React from "react";
-import ClipboardIcon from "./icons/ClipboardIcon";
-import CopyIcon from "./icons/CopyIcon";
-
-interface CodeExampleProps {
-  /** Markdown content to display; falls back to default example if not provided */
-  code?: string;
-  /** Optional URL for "View on GitHub" link */
-  href?: string;
-  /** If true, render only the code block without the section wrapper */
-  compact?: boolean;
-  /** Override Tailwind height classes for the <pre> block */
-  heightClass?: string;
-
-  /**
-   * When true, vertically center the content and copy button – useful for
-   * single-line shell commands shown inside a short container (e.g. FAQ).
-   */
-  centerVertically?: boolean;
-}
-
-export const HERO_AGENTS_MD = `# AGENTS.md
-
-## Setup commands
-- Install deps: \`pnpm install\`
-- Start dev server: \`pnpm dev\`
-- Run tests: \`pnpm test\`
-
-## Code style
-- TypeScript strict mode
-- Single quotes, no semicolons
-- Use functional patterns where possible`;
-
-const EXAMPLE_AGENTS_MD = `# Sample AGENTS.md file
-
-## Dev environment tips
-- Use \`pnpm dlx turbo run where <project_name>\` to jump to a package instead \
-of scanning with \`ls\`.
-- Run \`pnpm install --filter <project_name>\` to add the package to your \
-workspace so Vite, ESLint, and TypeScript can see it.
-- Use \`pnpm create vite@latest <project_name> -- --template react-ts\` to \
-spin up a new React + Vite package with TypeScript checks ready.
-- Check the name field inside each package's package.json to confirm the \
-right name—skip the top-level one.
-
-## Testing instructions
-- Find the CI plan in the .github/workflows folder.
-- Run \`pnpm turbo run test --filter <project_name>\` to run every check \
-defined for that package.
-- From the package root you can just call \`pnpm test\`. The commit should \
-pass all tests before you merge.
-- To focus on one step, add the Vitest pattern: \`pnpm vitest run -t "<test \
-name>"\`.
-- Fix any test or type errors until the whole suite is green.
-- After moving files or changing imports, run \`pnpm lint --filter \
-<project_name>\` to be sure ESLint and TypeScript rules still pass.
-- Add or update tests for the code you change, even if nobody asked.
-
-## PR instructions
-- Title format: [<project_name>] <Title>
-- Always run \`pnpm lint\` and \`pnpm test\` before committing.`;
-
-/**
- * Very lightly highlight the Markdown without fully parsing it.
- */
-function parseMarkdown(md: string): React.ReactNode[] {
-  const lines = md.split("\n");
-  const elements: React.ReactNode[] = [];
-
-  for (let i = 0; i < lines.length; i++) {
-    const line = lines[i];
-
-    // Handle headers
-    if (line.startsWith("# ") || line.startsWith("## ") || line.startsWith("### ")) {
-      elements.push(
-        <div key={i} className="font-bold">
-          {line}
-        </div>
-      );
-    } else if (line.startsWith("- ")) {
-      // Handle list items with inline code
-      elements.push(
-        <div key={i}>
-          {renderLineWithInlineCode(line)}
-        </div>
-      );
-    } else if (line.trim() === "") {
-      // Handle empty lines
-      elements.push(<div key={i}>&nbsp;</div>);
-    } else {
-      // Handle regular lines with inline code
-      elements.push(
-        <div key={i}>
-          {renderLineWithInlineCode(line)}
-        </div>
-      );
-    }
-  }
-
-  return elements;
-}
-
-/**
- * Render a line with inline code highlighting
- */
-function renderLineWithInlineCode(line: string): React.ReactNode {
-  const parts = line.split(/(`[^`]+`)/g);
-
-  return parts.map((part, index) => {
-    if (part.startsWith("`") && part.endsWith("`")) {
-      // This is inline code
-      return (
-        <span key={index} className="bg-gray-200 dark:bg-gray-800 px-1 rounded">
-          {part}
-        </span>
-      );
-    }
-    // Regular text
-    return part;
-  });
-}
-
-/**
- * Markdown block for AGENTS.md examples.
- */
-export default function CodeExample({
-  code,
-  href,
-  compact = false,
-  heightClass,
-  centerVertically = false,
-}: CodeExampleProps) {
-  const md = code ?? EXAMPLE_AGENTS_MD;
-  const [copied, setCopied] = React.useState(false);
-
-  const copyToClipboard = async () => {
-    try {
-      await navigator.clipboard.writeText(md);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch (err) {
-      console.error("Failed to copy to clipboard:", err);
-    }
-  };
-
-  const content = (
-    <>
-      <div className="relative">
-        <button
-          onClick={copyToClipboard}
-          className={`absolute right-3 p-2 rounded-md bg-transparent text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors z-10 cursor-pointer ${
-            centerVertically ? "top-1/2 -translate-y-1/2" : "top-3"
-          }`}
-          aria-label="Copy to clipboard"
-        >
-          {copied ? (
-            <svg
-              className="w-4 h-4"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M5 13l4 4L19 7"
-              />
-            </svg>
-          ) : (
-            <CopyIcon className="w-4 h-4" />
-          )}
-        </button>
-        <pre
-          className={`relative rounded-lg bg-white dark:bg-black text-gray-800 dark:text-gray-100 text-xs leading-6 overflow-x-auto p-4 ${
-            centerVertically ? "flex items-center" : ""
-          } ${
-            heightClass
-              ? heightClass
-              : compact
-              ? ""
-              : "min-h-[250px] max-h-[500px]"
-          } border border-gray-200 dark:border-gray-700 shadow-sm`}
-        >
-          <code>
-            {parseMarkdown(md)}
-          </code>
-        </pre>
-      </div>
-    </>
-  );
-
-  if (compact) {
-    return <div className="w-full">{content}</div>;
-  }
-
-  return (
-    <section className="px-6 pt-10 pb-24 bg-gray-50 dark:bg-gray-900/40">
-      <div className="max-w-5xl mx-auto flex flex-col gap-6">
-        <h2 className="text-3xl font-semibold tracking-tight">
-          AGENTS.md in action
-        </h2>
-        {content}
-      </div>
-    </section>
-  );
-}

package/resources/local/agents.md/components/CompatibilitySection.tsx

@@ -1,378 +0,0 @@
-import React, { useEffect, useMemo, useRef, useState } from "react";
-import Image from "next/image";
-import Section from "@/components/Section";
-
-type AgentEntry = {
-  name: string;
-  url: string;
-  from?: string;
-  imageSrc?: string;
-  imageSrcLight?: string;
-  imageSrcDark?: string;
-};
-
-const agents: AgentEntry[] = [
-  {
-    name: "Codex",
-    url: "https://openai.com/codex/",
-    from: "OpenAI",
-    imageSrc: "/logos/codex.svg",
-  },
-  {
-    name: "Amp",
-    url: "https://ampcode.com",
-    imageSrc: "/logos/amp.svg",
-  },
-  {
-    name: "Jules",
-    url: "https://jules.google",
-    from: "Google",
-    imageSrc: "/logos/jules.svg",
-  },
-  {
-    name: "Cursor",
-    url: "https://cursor.com",
-    imageSrc: "/logos/cursor.svg",
-  },
-  {
-    name: "Factory",
-    url: "https://factory.ai",
-    imageSrc: "/logos/factory.svg",
-  },
-  {
-    name: "RooCode",
-    url: "https://roocode.com",
-    imageSrc: "/logos/roocode.svg",
-  },
-  {
-    name: "Aider",
-    url: "https://aider.chat/docs/usage/conventions.html#always-load-conventions",
-    imageSrc: "/logos/aider.svg",
-  },
-  {
-    name: "Gemini CLI",
-    url: "https://github.com/google-gemini/gemini-cli/blob/main/docs/get-started/configuration.md#available-settings-in-settingsjson",
-    from: "Google",
-    imageSrc: "/logos/gemini.svg",
-  },
-  {
-    name: "goose",
-    url: "https://github.com/block/goose",
-    imageSrc: "/logos/goose.svg",
-  },
-  {
-    name: "Kilo Code",
-    url: "https://kilocode.ai/",
-    imageSrc: "/logos/kilo-code.svg",
-  },
-  {
-    name: "opencode",
-    url: "https://opencode.ai/docs/rules/",
-    imageSrc: "/logos/opencode.svg",
-  },
-  {
-    name: "Phoenix",
-    url: "https://phoenix.new/",
-    imageSrc: "/logos/phoenix.svg",
-  },
-  {
-    name: "Zed",
-    url: "https://zed.dev/docs/ai/rules",
-    imageSrc: "/logos/zed.svg",
-  },
-  {
-    name: "Semgrep",
-    url: "https://semgrep.dev",
-    imageSrc: "/logos/semgrep.svg",
-  },
-  {
-    name: "Warp",
-    url: "https://docs.warp.dev/knowledge-and-collaboration/rules#project-scoped-rules-1",
-    imageSrc: "/logos/warp.svg",
-  },
-  {
-    name: "Coding agent",
-    from: "GitHub Copilot",
-    url: "https://gh.io/coding-agent-docs",
-    imageSrc: "/logos/copilot.svg",
-  },
-  {
-    name: "VS Code",
-    url: "https://code.visualstudio.com/docs/editor/artificial-intelligence",
-    imageSrcLight: "/logos/vscode-light.svg",
-    imageSrcDark: "/logos/vscode-dark.svg",
-  },
-  {
-    name: "Ona",
-    url: "https://ona.com",
-    imageSrcLight: "/logos/ona-light.svg",
-    imageSrcDark: "/logos/ona-dark.svg",
-  },
-  {
-    name: "Devin",
-    from: "Cognition",
-    url: "https://devin.ai",
-    imageSrcLight: "/logos/devin-light.svg",
-    imageSrcDark: "/logos/devin-dark.svg",
-  },
-  {
-    name: "Windsurf",
-    from: "Cognition",
-    url: "https://windsurf.com",
-    imageSrcLight: "/logos/windsurf-light.svg",
-    imageSrcDark: "/logos/windsurf-dark.svg",
-  },
-  {
-    name: "Autopilot & Coded Agents",
-    from: "UiPath",
-    url: "https://uipath.github.io/uipath-python",
-    imageSrc: "/logos/uipath.svg",
-  },
-  {
-    name: "Augment Code",
-    url: "https://docs.augmentcode.com/cli/overview",
-    imageSrc: "/logos/augment.svg",
-  },
-  {
-    name: "Junie",
-    from: "JetBrains",
-    url: "https://jetbrains.com/junie",
-    imageSrc: "/logos/junie.svg",
-  },
-];
-
-const shuffleAgents = (items: AgentEntry[]) => {
-  const copy = [...items];
-  for (let i = copy.length - 1; i > 0; i -= 1) {
-    const j = Math.floor(Math.random() * (i + 1));
-    [copy[i], copy[j]] = [copy[j], copy[i]];
-  }
-  return copy;
-};
-
-type LogoItemProps = AgentEntry & {
-  variant?: "marquee" | "grid";
-};
-
-function LogoItem({
-  name,
-  url,
-  from,
-  imageSrc,
-  imageSrcLight,
-  imageSrcDark,
-  variant = "marquee",
-}: LogoItemProps) {
-  const baseClasses =
-    variant === "grid"
-      ? "flex h-full w-full min-w-0 items-center gap-4"
-      : "flex h-20 min-w-[280px] items-center gap-4 pr-10";
-
-  return (
-    <a
-      href={url}
-      target="_blank"
-      rel="noopener noreferrer"
-      className={baseClasses}
-    >
-      <div className="flex h-16 w-16 items-center justify-center">
-        {imageSrcLight && imageSrcDark ? (
-          <>
-            <Image
-              src={imageSrcLight}
-              alt={`${name} logo`}
-              width={64}
-              height={64}
-              className="block h-16 w-16 dark:hidden"
-            />
-            <Image
-              src={imageSrcDark}
-              alt={`${name} logo`}
-              width={64}
-              height={64}
-              className="hidden h-16 w-16 dark:block"
-            />
-          </>
-        ) : imageSrc ? (
-          <span
-            aria-hidden
-            className="block h-16 w-16 bg-gray-700 dark:bg-gray-400"
-            style={{
-              WebkitMaskImage: `url(${imageSrc})`,
-              maskImage: `url(${imageSrc})`,
-              WebkitMaskRepeat: "no-repeat",
-              maskRepeat: "no-repeat",
-              WebkitMaskSize: "contain",
-              maskSize: "contain",
-              WebkitMaskPosition: "center",
-              maskPosition: "center",
-            }}
-          />
-        ) : null}
-      </div>
-      <div className="flex flex-col justify-center text-left">
-        <span className="text-xl font-semibold leading-tight text-gray-700 dark:text-gray-300">
-          {name}
-        </span>
-        {from ? (
-          <span className="text-sm text-gray-500 dark:text-gray-400">
-            <span className="font-light">from</span>{" "}
-            <span className="font-semibold">{from}</span>
-          </span>
-        ) : null}
-      </div>
-    </a>
-  );
-}
-
-function LogoMarqueeRow({
-  agents,
-  isActive,
-  duration,
-  offset,
-}: {
-  agents: AgentEntry[];
-  isActive: boolean;
-  duration: number;
-  offset?: number;
-}) {
-  const doubledAgents = useMemo(() => [...agents, ...agents], [agents]);
-
-  if (doubledAgents.length === 0) {
-    return null;
-  }
-
-  const trackStyle = {
-    animationPlayState: isActive ? "running" : "paused",
-    animationDelay: offset ? `${offset}s` : undefined,
-    "--marquee-duration": `${duration}s`,
-  } as React.CSSProperties;
-
-  return (
-    <div className="w-full overflow-hidden">
-      <div
-        className="logo-marquee-track flex items-center gap-8 py-3"
-        style={trackStyle}
-      >
-        {doubledAgents.map((agent, index) => (
-          <LogoItem key={`${agent.name}-${index}`} {...agent} />
-        ))}
-      </div>
-    </div>
-  );
-}
-
-export default function CompatibilitySection() {
-  const containerRef = useRef<HTMLDivElement | null>(null);
-  const [isInView, setIsInView] = useState(false);
-  const [shuffledAgents, setShuffledAgents] = useState<AgentEntry[]>(agents);
-  const [showGrid, setShowGrid] = useState(false);
-
-  useEffect(() => {
-    setShuffledAgents(shuffleAgents(agents));
-  }, []);
-
-  useEffect(() => {
-    if (showGrid) {
-      setIsInView(false);
-      return;
-    }
-
-    const node = containerRef.current;
-    if (!node) {
-      return;
-    }
-
-    const observer = new IntersectionObserver(
-      ([entry]) => {
-        setIsInView(entry.isIntersecting && entry.intersectionRatio > 0);
-      },
-      {
-        threshold: 0,
-      }
-    );
-
-    observer.observe(node);
-
-    if (typeof window !== "undefined") {
-      const rect = node.getBoundingClientRect();
-      const isVisible =
-        rect.bottom >= 0 &&
-        rect.right >= 0 &&
-        rect.left <= window.innerWidth &&
-        rect.top <= window.innerHeight;
-      setIsInView(isVisible);
-    }
-
-    return () => {
-      observer.disconnect();
-    };
-  }, [showGrid]);
-
-  const [topRow, bottomRow] = useMemo(() => {
-    const first: AgentEntry[] = [];
-    const second: AgentEntry[] = [];
-
-    shuffledAgents.forEach((agent, index) => {
-      if (index % 2 === 0) {
-        first.push(agent);
-      } else {
-        second.push(agent);
-      }
-    });
-
-    return [first, second];
-  }, [shuffledAgents]);
-
-  return (
-    <Section
-      id="compatibility"
-      title="One AGENTS.md works across many agents"
-      className={`py-12 px-0 ${showGrid ? "" : "!px-0"}`}
-      center
-      maxWidthClass={showGrid ? "max-w-3xl" : "max-w-none"}
-    >
-      <div className="mx-auto max-w-3xl text-center">
-        <p className="text-xl font-light text-gray-500 dark:text-gray-400 px-8">
-          Your agent definitions are compatible with a growing ecosystem of AI
-          coding agents and tools:
-        </p>
-      </div>
-      {showGrid ? (
-        <div
-          id="supported-agents"
-          className="mt-6 grid w-full grid-cols-2 gap-8 md:grid-cols-3"
-        >
-          {agents.map((agent) => (
-            <LogoItem key={agent.name} {...agent} variant="grid" />
-          ))}
-        </div>
-      ) : (
-        <div
-          ref={containerRef}
-          className="mt-6 flex w-full flex-col gap-6"
-          id="supported-agents"
-        >
-          <LogoMarqueeRow agents={topRow} isActive={isInView} duration={70} />
-          <LogoMarqueeRow
-            agents={bottomRow}
-            isActive={isInView}
-            duration={80}
-            offset={-35}
-          />
-        </div>
-      )}
-      <div className="mt-4 text-center">
-        <button
-          type="button"
-          onClick={() => setShowGrid((prev) => !prev)}
-          className="mt-4 text-base font-medium underline hover:no-underline cursor-pointer"
-          aria-controls="supported-agents"
-          aria-expanded={showGrid}
-        >
-          {showGrid ? "Collapse supported agents" : "View all supported agents"}
-        </button>
-      </div>
-    </Section>
-  );
-}