winter-super-cli 2026.5.15

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

@@ -0,0 +1,37 @@
+import Section from "@/components/Section";
+
+const AboutSection = () => (
+  <Section title="About" className="pb-0" center maxWidthClass="max-w-3xl">
+    <p className="max-w-3xl">
+      AGENTS.md emerged from collaborative efforts across the AI software
+      development ecosystem, including{" "}
+      <a href="https://openai.com/codex/" className="underline hover:no-underline" target="_blank" rel="noopener noreferrer">OpenAI Codex</a>,{" "}
+      <a href="https://ampcode.com" className="underline hover:no-underline" target="_blank" rel="noopener noreferrer">Amp</a>,{" "}
+      <a href="https://jules.google" className="underline hover:no-underline" target="_blank" rel="noopener noreferrer">Jules from Google</a>,{" "}
+      <a href="https://cursor.com" className="underline hover:no-underline" target="_blank" rel="noopener noreferrer">Cursor</a>, and{" "}
+      <a href="https://factory.ai" className="underline hover:no-underline" target="_blank" rel="noopener noreferrer">Factory</a>.
+    </p>
+
+    <p className="max-w-3xl mt-4">
+      We&rsquo;re committed to helping maintain and evolve this as an open format that benefits the entire developer community,
+      regardless of which coding agent you use.
+    </p>
+
+    <p className="max-w-3xl mt-4">
+      AGENTS.md is now stewarded by the{" "}
+      <a href="https://aaif.io" className="underline hover:no-underline">
+        Agentic AI Foundation
+      </a>{" "}
+      under the Linux Foundation.{" "}
+      <a
+        href="https://openai.com/index/agentic-ai-foundation/"
+        className="underline hover:no-underline"
+      >
+        Learn more &rarr;
+      </a>
+    </p>
+
+  </Section>
+);
+
+export default AboutSection;

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

@@ -0,0 +1,207 @@
+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

@@ -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>
+  );
+}