winter-super-cli 2026.6.21 → 2026.6.22

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

@@ -0,0 +1,378 @@
+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>
+  );
+}

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

@@ -0,0 +1,188 @@
+import React from "react";
+
+// GitHub language colors for badge backgrounds
+const LANG_BG_COLORS: Record<string, string> = {
+  "TypeScript": "#3178c6",
+  "Java": "#b07219",
+  "Python": "#3572a5",
+  "Rust": "#dea584",
+  "C++": "#f34b7d",
+};
+
+interface RepoCardProps {
+  /** e.g. "openai/codex" */
+  name: string;
+  /** Short 1-2 line summary */
+  description: string;
+  /** Primary language */
+  language: string;
+}
+
+/** Hard-coded examples used for the marketing page. */
+const REPOS: RepoCardProps[] = [
+  {
+    name: "openai/codex",
+    description: "General-purpose CLI tooling for AI coding agents.",
+    language: "Rust",
+  },
+  {
+    name: "apache/airflow",
+    description:
+      "Platform to programmatically author, schedule, and monitor workflows.",
+    language: "Python",
+  },
+  {
+    name: "temporalio/sdk-java",
+    description:
+      "Java SDK for Temporal, workflow orchestration defined in code.",
+    language: "Java",
+  },
+  {
+    name: "PlutoLang/Pluto",
+    description: "A superset of Lua 5.4 with a focus on general-purpose programming.",
+    language: "C++",
+  },
+];
+
+interface ExampleListSectionProps {
+  contributorsByRepo?: Record<string, { avatars: string[]; total: number }>;
+  standalone?: boolean; // if false wraps with its own section
+}
+
+const InnerGrid = ({
+  contributorsByRepo = {},
+}: {
+  contributorsByRepo: Record<string, { avatars: string[]; total: number }>;
+}) => (
+  <>
+    <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+      {REPOS.map((repo, key) => (
+        <ExampleCard
+          key={repo.name}
+          repo={repo}
+          avatars={contributorsByRepo[repo.name]?.avatars ?? []}
+          hideOnSmall={key > 3}
+          hideOnMedium={key > 2}
+          totalContributors={
+            contributorsByRepo[repo.name]?.total ??
+            contributorsByRepo[repo.name]?.avatars.length ??
+            0
+          }
+        />
+      ))}
+    </div>
+    <div className="flex justify-center mt-6">
+      <a
+        href="https://github.com/search?q=path%3AAGENTS.md+NOT+is%3Afork+NOT+is%3Aarchived&type=code"
+        className="text-base font-medium underline hover:no-underline"
+      >
+        View 60k+ examples on GitHub
+      </a>
+    </div>
+  </>
+);
+
+const ExampleListSection = ({
+  contributorsByRepo = {},
+  standalone = false,
+}: ExampleListSectionProps) => {
+  if (standalone) {
+    return (
+      <div className="max-w-6xl mx-auto">
+        <InnerGrid contributorsByRepo={contributorsByRepo} />
+      </div>
+    );
+  }
+
+  return (
+    <section className="px-6 pb-12 -mt-36">
+      <div className="max-w-6xl mx-auto">
+        <h2 className="text-3xl font-semibold mb-6">Who uses AGENTS.md?</h2>
+        <InnerGrid contributorsByRepo={contributorsByRepo} />
+      </div>
+    </section>
+  );
+};
+
+interface ExampleCardPropsExtended {
+  repo: RepoCardProps;
+  avatars?: string[];
+  totalContributors?: number;
+  hideOnSmall?: boolean;
+  hideOnMedium?: boolean;
+}
+
+function ExampleCard({
+  repo,
+  avatars = [],
+  totalContributors = 0,
+  hideOnSmall = false,
+  hideOnMedium = false,
+}: ExampleCardPropsExtended) {
+  // Show top 3 contributors; ensure highest-ranked appears rightmost.
+  const orderedAvatars = avatars.slice(0, 3).reverse();
+  // Badge background color based on GitHub language colors
+  const badgeBg = LANG_BG_COLORS[repo.language] ?? "#6b7280";
+
+  return (
+    <a
+      href={`https://github.com/${repo.name}/blob/-/AGENTS.md`}
+      target="_blank"
+      rel="noopener noreferrer"
+      className={`lg:aspect-video bg-white dark:bg-black border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm flex flex-col justify-between p-4 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors ${
+        hideOnSmall
+          ? "hidden lg:flex"
+          : hideOnMedium
+          ? "flex md:hidden lg:flex"
+          : ""
+      }`}
+    >
+      <div>
+        <h3
+          className="font-semibold text-lg leading-snug truncate"
+          title={repo.name}
+        >
+          {repo.name}
+        </h3>
+        <p className="mt-1 text-sm text-gray-600 dark:text-gray-400">
+          {repo.description}
+        </p>
+      </div>
+
+      <div className="flex items-end justify-between mt-4">
+        <span
+          className="text-xs font-semibold px-2 py-0.5 rounded"
+          style={{ backgroundColor: badgeBg, color: "#fff" }}
+        >
+          {repo.language}
+        </span>
+        <div className="flex items-center justify-center">
+          <div className="flex items-center justify-center -space-x-2">
+            {orderedAvatars.length > 0
+              ? orderedAvatars.map((url, i) => (
+                  // eslint-disable-next-line @next/next/no-img-element
+                  <img
+                    key={i}
+                    src={url}
+                    alt="Contributor avatar"
+                    className="w-6 h-6 rounded-full ring-2 ring-white dark:ring-gray-900 object-cover block shrink-0"
+                  />
+                ))
+              : Array.from({ length: 3 }).map((_, i) => (
+                  <span
+                    key={i}
+                    aria-hidden
+                    className="w-6 h-6 rounded-full bg-gray-300 dark:bg-gray-700 ring-2 ring-white dark:ring-gray-900 block shrink-0"
+                  />
+                ))}
+          </div>
+          <span className="ml-2 text-xs font-semibold px-2 py-0.5 rounded bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 translate-y-[1px]">
+            + {totalContributors}
+          </span>
+        </div>
+      </div>
+    </a>
+  );
+}
+
+export default ExampleListSection;

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

@@ -0,0 +1,22 @@
+import React from "react";
+import Section from "@/components/Section";
+import CodeExample from "@/components/CodeExample";
+import ExampleListSection from "@/components/ExampleListSection";
+
+interface ExamplesSectionProps {
+  contributorsByRepo: Record<string, { avatars: string[]; total: number }>;
+}
+
+export default function ExamplesSection({ contributorsByRepo }: ExamplesSectionProps) {
+  return (
+    <Section id="examples" title="Examples" className="py-12" center>
+      {/* Wide code example */}
+      <div className="mb-4">
+        <CodeExample compact />
+      </div>
+
+      {/* Repo cards */}
+      <ExampleListSection contributorsByRepo={contributorsByRepo} standalone />
+    </Section>
+  );
+}

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

@@ -0,0 +1,113 @@
+import React from "react";
+import Section from "@/components/Section";
+import CodeExample from "@/components/CodeExample";
+
+interface FAQItem {
+  question: string;
+  answer: React.ReactNode;
+}
+
+export default function FAQ() {
+  const faqItems: FAQItem[] = [
+    {
+      question: "Are there required fields?",
+      answer:
+        "No. AGENTS.md is just standard Markdown. Use any headings you like; the agent simply parses the text you provide.",
+    },
+    {
+      question: "What if instructions conflict?",
+      answer:
+        "The closest AGENTS.md to the edited file wins; explicit user chat prompts override everything.",
+    },
+    {
+      question: "Will the agent run testing commands found in AGENTS.md automatically?",
+      answer:
+        "Yes—if you list them. The agent will attempt to execute relevant programmatic checks and fix failures before finishing the task.",
+    },
+    {
+      question: "Can I update it later?",
+      answer: "Absolutely. Treat AGENTS.md as living documentation.",
+    },
+    {
+      question: "How do I migrate existing docs to AGENTS.md?",
+      answer: (
+        <>
+          <p className="mb-2">
+            Rename existing files to AGENTS.md and create symbolic links for backward compatibility:
+          </p>
+          <div className="w-full flex justify-center">
+            <CodeExample
+              code="mv AGENT.md AGENTS.md && ln -s AGENTS.md AGENT.md"
+              compact
+              heightClass="min-h-[48px]"
+              centerVertically
+            />
+          </div>
+        </>
+      ),
+    },
+    {
+      question: "How do I configure Aider?",
+      answer: (
+        <>
+          <p className="mb-2">
+            Configure Aider to use AGENTS.md in <code>.aider.conf.yml</code>:
+          </p>
+          <div className="w-full flex justify-center">
+            <CodeExample
+              code="read: AGENTS.md"
+              compact
+              heightClass="min-h-[48px]"
+              centerVertically
+            />
+          </div>
+        </>
+      ),
+    },
+    {
+      question: "How do I configure Gemini CLI?",
+      answer: (
+        <>
+          <p className="mb-2">
+            Configure Gemini CLI to use AGENTS.md in <code>.gemini/settings.json</code>:
+          </p>
+          <div className="w-full flex justify-center">
+            <CodeExample
+              code='{
+  "context": {
+    "fileName": "AGENTS.md"
+  },
+}'
+              compact
+              heightClass="min-h-[48px]"
+              centerVertically
+            />
+          </div>
+        </>
+      ),
+    },
+  ];
+
+  return (
+    <Section
+      id="faq"
+      title="FAQ"
+      className="py-20"
+      center
+      maxWidthClass="max-w-3xl"
+    >
+      <div className="space-y-8 max-w-4xl mx-auto">
+        {faqItems.map((item, index) => (
+          <div key={index}>
+            <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
+              {item.question}
+            </h3>
+            <div className="text-gray-600 dark:text-gray-400 leading-relaxed">
+              {item.answer}
+            </div>
+          </div>
+        ))}
+      </div>
+    </Section>
+  );
+}